東京上野のWeb制作会社LIG仕事も遊びもいいオフィス。株式会社LIGでWebディレクターのアシスタントとして修行中のきくりんです!「一流になるには、一流を知る必要がある」と、どこかで誰かが言っていた気がします。一流のWebディレクターを目指して、グッときたサイトは、なぜグッときたのかも考えながらインプットするよう心がけているのですが、そんななかでふと気になったことが。「Web業界でディレクターとして働く身として、他の制作会社さんのどこがどうすごいのかを知っておくべきでは?」そこで、現場で働くLIGの先輩クリエイターに、グッときたサイトと、どういうところにグッときたのか、そのサイトを制作した会社も含めてアンケートをとって、まとめてみることにしました。見やすくするため、サイトのタイプを大きく6つに分類して整理してみました。けの情報などを公開するためのサイトです。企業の顔としての役割もあるため、細部までこだわって制作されているサイトばかりです。プロレド・パートナーズhttps://www.prored-p.com/回答者:藤田(デザイナー)デザインやアニメーション、撮影ディレクションに至るまでまったく隙のないクリエイティブを行なっている印象のサイト。オープニングの演出もすごいですが、微妙に画像をパララックス(※)させている部分やページ最下部までたどり着いた際のスクロールの質感など、細かいアニメーションにとてもこだわりを感じます。整頓されたミニマムなレイアウトは清潔感があり情報の見やすさに長けている反面、単調に見える懸念がありますが、このサイトはアニメーションや配色で上手くリズムを作っており、見ていて飽きのこないデザインに仕上げているのがとても素敵だと感じました。「career」ページのデザインルールの崩し方がおしゃれすぎます。※パララックス:視差効果という意味。スクロール等を行ったときに、部分ごとに動く向きや動くスピードを変えることで、立体感や奥行き感を演出する手法。サン・アドhttps://sun-ad.co.jp/回答者:北川パーヤン(Webディレクター)サン・アドのコーポレートサイトの素晴らしいところは「過不足のなさ」。必要なものはすべて揃っているし、無駄なものはひとつもありません。Webサイト制作でこの「過不足ない」状態を作り上げるのはとても難しいのです。作品インデックスはプロジェクトとプロジェクト内制作物を並列に掲載しており、はじめはちょっとだけ戸惑いますが理解するととても使いやすいです。作品紹介に使われている写真はすべてこのリニューアルのために撮り下ろし、説明文も各プロジェクトの担当者にヒアリングし書き下ろしたとのこと。最後にグロナビ(※)に小さく載せている第1階層「所在地」、やさしさがたまらなくないですか?※グロナビ:グローバルナビゲーションの略。Webサイトの各ページに共通して設置されている、案内メニューのこと。501TEL:03-6450-5030リクルートサイトコーポレートサイトが顧客・ビジネスパートナー・投資家など多岐にわたるターゲットに情報を伝えるものであるのに対して、リクルートサイトはターゲットを求職者のみに絞ることで、その企業のビジョンなど、より深くメッセージを伝えることができます。採用サイトhttps://ohako-inc.jp/recruit/回答者:みや(デザイナー)一度サイトを見たあとに以前の採用ページを見てみたのですが、ビジョンやコンセプトの根っこは変わらず、より具体的な言葉になって表面に出てきていると感じました。自分たちの武器が何であるかというのがわかっていて、それがリクルーターにも伝わるというのは採用サイトとしてできあがっているなーと感動しました。サイト自体はかなりシンプルで余計なものがない「機能優先」の印象ですが、手書きのタイトルが入ることによって温度が生まれてちょうどよくなっているのが、個人的に好きな部分です。新卒採用サイトhttps://contents.netbk.co.jp/pc/recruit/回答者:ともぞう(Webディレクター)キーカラーの青が効果的に使われているサイトです。堅い印象を抱きがちな銀行のサイトですが、画像が大きく配置されており、情感豊かな印象になっていること、雑誌のようなレイアウトで視線にリズムがつき、見ていて楽しくなること、社員の方々の写真も笑顔で、「銀行の在り方を変えろ」というメッセージがサイト全体で表現されています。採用情報サイトhttps://recruit.livesense.co.jp/回答者:けんてぃ(デザイナー)ロゴをひっくり返した『?』マークを起点としたウェブサイト全体のストーリーがとても素敵なデザインです。–メディアサイトメディアサイトは、ニュースや専門的な記事など、何かしらの情報を発信しているサイトです。コンテンツの質自体もさることながら、読みやすさや、さらには読み進めたくなるような工夫などが満載のサイトをご紹介します。–https://weare.sitateru.com/回答者:ずんこ(デザイナー)整然としていながら、リッチさとさりげないおしゃれを感じるサイトです。細部へのこだわりが感じられる「服」のようで、小さな発見がたくさん散りばめられています。モバイル端末をかなり意識して設計されているからだと思いますが、新着記事が並ぶスライダーの左右の記事が、PCではバッサリと途中で切れるレイアウトに潔さを感じました。magazinehttp://r-magazine.world/回答者:ザワ(フロントエンドエンジニア)サイトの第一印象は「優しさ」。魅力溢れる写真に目を奪われがちですが、ミニマルかつ可読性の高いデザイン、シンプルなカテゴリ構成、回遊のしやすいページ構成に胸がジーンとします。ワンページスクロール(※1)や慣性スクロール(※2)、非同期遷移(※3)などのテクニックがサイトに華を添えて、胸がキュンとします。すべてがローラさんの魅力をファンに届けるために作られていることが感じられる、優しいサイトですね。ワンページスクロール:スクロールすると、フリップをめくるように、1ページずつ画面を遷移させる手法。慣性スクロール:画面を素早くスクロールしたときに、スクロールをやめたり、指を画面から離したりしてもすぐに止まらず、慣性が作用しているように、しばらくスクロールを維持してゆっくりと止まるにする手法。非同期遷移:ページ遷移時に、異なるURLの別ページに移動するのではなく、URLはそのままに、今表示されている内容を変化させる手法。スムーズなページ遷移により、ユーザーはコンテンツをどんどん読み進められるなどのメリットがある。Path表参道A棟3FTEL:03-3400-6996キャンペーン・プロダクトサイトキャンペーンサイトは新商品や新コンテンツ、企画、イベントなどの宣伝の一環として作成するサイトで、プロダクトサイトは自社の商品・プロダクトの良さを伝え、購買に繋げるためのサイトです。未来のミライ展〜時を越える細田守の世界https://mirai-ten.jp/回答者:もーりー(デザイナー)イベントブースの企画・開発からできるカヤックさんだからこそ制作できるWebサイトだと思います。できる組織はなかなかないのではないでしょうか。羨まし!と、ここまで書いて気がついたのですが、カヤックさんの本社は鎌倉ですね。MYSELFhttps://c4cm.creativity-class.xyz/回答者:しんどうドリル(フロントエンドエンジニア)地方創生を目的として秩父郡・横瀬町にて中学生を対象に行われた教育プログラム「横瀬クリエイティビティー・クラス」。そのなかで制作された作品を紹介する特設サイトです。ここまでWebGL(※)が、デザインに対して調和しているのは圧巻です。大胆かつ繊細な動きにびびります。全体に写真が広がるマウスインタラクションは、とても感動しました。学生が制作している映像作品の、プロセスや、コンセプトがとても印象に残ります。表現の可能性を感じさせるWebサイトだと思いました。受託制作ではないノープロフィットサイトなのですがこちらの枠で紹介させていただきました。※WebGL:ブラウザ上で3DCGを表示する技術。3Dのアニメーションや、インタラクティブなコンテンツなど、よりリッチな表現を行うことができる。(ジムナストコロン)http://www.kabu-kitamura.com/colon/回答者:ちゃんれみ(Webディレクター)PC・スマホだけでなく、タブレットまでどの画面幅で見ても美しいレイアウト。PCはマウスカーソルで、スマホはジャイロ(※)でパララックス効果が発動するインタラクション。UIに関しては、PCはスクロール、スマホはフリックと読み進める方法が切り分けられています。グラフィックの美しさもさることながら、デバイスごとの特色を意識し、すべてが計算し尽くされている。スマホやタブレットの縦横表示を切り替えても美しいままなのは、もはや鳥肌モノです。クレジットを見ると「淑徳大学チアリーディング部」とあります。このプロダクトをつくっている企業本社と同じ、愛知県にある大学です。アサインまで美しいなんてもう......!※ジャイロ(ジャイロセンサー):スマートフォンに搭載されているセンサーのひとつ。デバイスの向きや回転、傾きを検知する。このジャイロセンサーを利用することで、スマートフォンならではの表現が可能になる。コア原宿3FTEL:03-6459-2365ポートフォリオサイトポートフォリオサイトは、企業、もしくは個人の制作実績を紹介するサイトです。自身の制作実績をアピールし、次の案件の獲得に繋げる役割があるため、制作物がより効果的に、魅力的に伝わるよう工夫されたサイトが多いです。渡邉肇https://hajimewatanabe.jp/回答者:タリー(デザイナー)画面全体を使った揺らぎの表現がとても特徴的です。トータルで表現されている「水感」が、見る人を不思議な気持ちにさせてくれます。バケモノという会社の名に負けない、毎回違った切り口や技術の一つを、このサイトでは体験できると思いました。するものを提供することによって、サイトを訪れたユーザーの心を鷲掴みにするサイトとなっています。Shifthttps://theshift.tokyo/回答者:ひが(フロントエンドエンジニア)潔い。シンプルだが大胆なレイアウトが。観る者の期待を抱かせるチラリズム。伝えたいモノを表現するアニメーションが。シフトする存在への思い。機敏で軽快なインタラクションが。溢れ出るユーザーへの優しさ。私もこのような作品の創造に関わりたい。心揺さぶるモノとは細かな設計に基づき制作されているのだろうか?一人の制作者として、制作の過程をのぞきたいと願う素敵なサイトです。–Webサービスメーラーやメモ、タスク管理ツールなど、今まではPC上のアプリケーションとして動作していたものを、Webブラウザ上で行えるようにしたものがWebサービス(Webアプリケーション)です。jootohttps://www.jooto.com/回答者:まさくに(バックエンドエンジニア)既存サービスの大きな改修に臨み、機能、UI/UXが緻密に取捨選択されたことを感じますJooto自体はサービスローンチ当初、プロジェクト管理ツールを求め試用したことがありました。そのときは機能とデザインにどこかチグハグさを感じて、採用を見送ったのですが、現在のJootoは機能とデザインとUI/UXが渾然一体となった設計の妙を感じます。必要なところに統一感のあるアイコンが配され、目が迷子にならず情報を追えるようになった気がします。以前ともっとも変わったのは、やはり「親しみやすさ」が増したことではないでしょうか。その性質からプロジェクト管理ツールはクールになりがちだと思うのですが、温かみがあり、かつ、うるさくない色使いで、ある種大胆なプロジェクト管理ツールに生まれ変わらせたと感じました。同じクリエイターとして、弊社メンバーのコメントにも熱が入っているように思いました。今回、デザイナーやエンジニアなど各職種でアンケートをとったのですが、職種ごとの視点の違いなども知ることができて、新人Webディレクターとして僕自身とても勉強になりました。今後のインプットに活かしていこうと思います。ANALYZE」を導入後、CVR改善に成功した品川美容外科のWeb担当者に話を聞いてきた。2019.12.31281年末年始のイマこそ!マーケティングを学びたい人必見・Udemyおすすめ動画講座5選【1/9まで新春セール実施中!】2019.12.2525130歳独身彼女なし。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。