Works 制作実績

ランキング、メディアサイト(教育関係)

要件:
新規立ち上げ/レスポンシブ/ランキング表示/メディアサイト
担当:
  • ディレクション
  • フロントエンド
要点:
高校教員がメインターゲット。偏差値とは異なる評価基準の大学ランキング。 大学選びの新しい選定基準を提供するサイト。 DB連携のランキング表示、ソートやSVGインフォグラフィックの自動生成、NOREN(CMS)連携などディレクションから実装までを担当しました。

大学サイト(私立大学工業系学部)

要件:
リニューアル/レスポンシブ/WordPress/400ページ以上
期間:
8ヶ月
担当:
  • プロジェクトマネジメント
  • ディレクション
  • コーディング(メルマガ)
  • 更新業務
要点:
アクセス解析とユーザーインタビューを足がかりに情報設計・UX設計しました。 また、関連ページへのリーチを意識し、SEOに強い設計にしました。 ローンチ後もメルマガのライティングとコーディング、日々の更新業務に携わりました。

プロモーションサイト(人材広告企業)

要件:
PCサイト/SPサイト
担当:
  • プランニング
  • ディレクション(制作/テクニカル)
  • プロトタイプ実装
  • システム開発会社、コーディング会社との連携
要点:
Web上でユーザーの投稿画像とメッセージを一体画像にし、 API連携させたSNS(Twitter、Facebook、LINE )へ投稿できるサービスを構築しました。 基本プランニングから具体的なプランニングへの落し込みから システム開発会社、コーディング会社との連携するテクニカルディレクションを担当しました。

Webアプリケーション(行政サービス)

要件:
PCサイト/SPサイト
担当:
  • フロントエンド
  • プログラミング
要点:
ムービーとオーディオ(mp4、ogv、mp3)のプレイリストを作成。 PHPやSQLが使えない環境のため、CSVをデータベースとした簡易的なCMSにしました。 各所にダウンロード防止機能を設けました。

ブランドサイト新規制作(食品メーカー)

要件:
PCサイト/SPサイト
担当:
  • ディレクション(制作/UI設計/アート)
  • ライティング
要点:
基本商品のレパートリーの「広がり」をビジュアライズしました。 また、戦略的ワード(SEO)とターゲットユーザー層10名程度にヒアリング調査を実施し、コンテンツ設計しました。

ブランドサイトリニューアル(食品メーカー)

要件:
PCサイト/SPサイト/Retina対応
担当:
  • ディレクション(制作/アート/テクニカル)
  • フロントエンド
要点:
アニメーション(パララックスなど)を駆使し、生鮮野菜のフレッシュさと食卓に与える彩りを表現し、 それと同時に使いやすさを両立させました。 また、SEOに強いマークアップにも力を入れました。

プロモーションサイト(トラベルサービス)

要件:
レスポンシブ/Retina対応
担当:
  • フロントエンド
  • UI設計
要点:
コーディングを主として担当。またスマホでのUI設計など使いやすさを考慮したUIデザインを改善設計。 SVGを利用した高解像度、ファイルサイズ軽減などを行いました。

ブランドサイト(食品メーカー)

要件:
レスポンシブ/Retina対応
担当:
  • ディレクション
  • ライティング
要点:
コーディングを主として担当。またスマホでのUI設計など使いやすさを考慮したUIデザインを改善設計。 SVGを利用した高解像度、ファイルサイズ軽減などに力を入れました。

ブランドサイト(食品メーカー)

要件:
PCサイト/SPサイト
担当:
  • ディレクション
要点:
各所ビジュアルのスチール撮影やライティング等のディレクションを担当しました。

ブランドサイト(飲料メーカー)

要件:
レスポンシブ
担当:
  • ディレクション
要点:
4つのワインブランドサイトに関して、制作進行ディレクションを担当しました。 本ページ最下部、「その他実績(スマホ)」に他3つのサムネイルがございます。

キャンペーンサイト(省庁)

要件:
PCサイト/SPサイト
担当:
  • ディレクション
要点:
代理店と共同プランニング案件。 グラフィック、CM、コピー、プランニングチームの制作をWEBに落としこむ制作進行のディレクションを行いました。

プロモーションサイト(食品メーカー)

要件:
レスポンシブ/Retina対応
担当:
  • フロントエンド
要点:
見えづらい生産者と生産地のことを消費者に知ってもらい、繋がりを感じてもらうプロモーションサイト。 やわらかさを演出するアニメーションやパララックスを効果的に用いました。 高解像度、ファイルサイズ等を気をつけました。

その他実績1

実装例を見る

その他実績2

実装例を見る

その他実績(スマホ)

実装例を見る