未来のサービスを作る基礎技術

第5回 ATLのサイトの裏側―サイトデザインからサイト高速化まで

この記事を読むのに必要な時間:およそ 3 分

明けましておめでとうございます。高林です。本年度もATLをよろしくお願いします。

2013年の1回目は,ATL(Advanced Technology Lab)のホームページの裏側についてお話します。ATLのホームページは,2012年10月1日の分社化に合わせて新規で構築しました。

当初は,リクルートテクノロジーズサイトの1コンテンツとして大きな工数をかけずに構築する予定でしたが,お盆も過ぎた8月の下旬にCTO兼ラボ長でもある米谷の一言で,ATL単体のホームページを急遽構築することになりました。

サイトのデザインや構成など何も決まっていない状況で,リリース日のみが確定された状態です。クオリティを担保するのはもちろんのこと,スピード重視で作業を行わなければいけません。そこで,以前一緒に仕事をしたことのある,デザイナーのしょこたんに声をかけてATLのサイト作りがスタートしました。

サイトのコンセプトを決める

サイトのコンセプトを決める際に,ATLという組織を連想させる,キーワードを元に2つのサイトのビジュアルデザインを作成しました図1,2)⁠

図1 ⁠A案】トップから全てのコンテンツをポータルとして見せる構成

図1 【A案】トップから全てのコンテンツをポータルとして見せる構成

図2 ⁠B案】活発的なイメージを全面に押し出し文脈に沿って構成する

図2 【B案】活発的なイメージを全面に押し出し文脈に沿って構成する

2つのデザインのイメージは次のとおりです。

【A案】前衛的な尖ったイメージ
  • グリッドデザインでクールな印象
  • キーワード:ミニマルデザイン※1)⁠バウハウス※2)⁠クール
【B案】活動的で元気なイメージ
  • メッセージを前面に押し出してラフな印象
  • キーワード:元気な,コミック,ラフ
※1)
ミニマル・デザイン(Minimal Design)は,あまり使用しない機能のせいでシステムが肥大化することを避け,必要最小限の機能に絞って設計すること。
※2)
バウハウスは,1919年,ドイツ・ヴァイマルに設立された,工芸・写真・デザインなどを含む美術と建築に関する総合的な教育を行った学校。また,その流れを汲む合理主義的・機能主義的な芸術を指すこと。

メンバーの中でも,どちらのデザインにするか分かれました。B案は,明るく元気な印象を受けるデザインですが,ATLとしては,エンジニアを「猛獣」と呼んでいるように,尖っているイメージを全面に出したかったので,黒を基調としたA案を採用することしました図3)⁠また,リクルートテクノロジーズのサイトが,レスポンシブWebデザインで構築することになっていたので,スマートフォンやタブレットで見たときでも,PCと同じようなユーザー体験ができるように,ATLのサイトも同様にレスポンシブWebデザインで構築するようにしました図4,5)⁠

図3 PCなどで見たときのATLサイト

図3 PCなどで見たときのATLサイト

図4 スマートフォンなどで見たときのATLのサイト

図4 スマートフォンなどで見たときのATLのサイト

図5 タブレットなどで見たときのATLのサイト

図5 タブレットなどで見たときのATLのサイト

このように,解像度によって3つのパターンに表示を切り替えることで,どのプラットフォームで見ても必要な情報が伝えられるようなサイト構成になっています。サイトデザインの話は,ATLブログでも公開していますので,ぜひ参考にしてください。

サーバ環境を構築する

ATLのサイトは,CMSで有名なWordPressで構築しています。WordPressを選択した理由は,制作チームが既にWordPressを利用してサイトの構築をしており,導入の敷居が低いのと,筆者もPHPを使ったアプリケーション開発を行っていたので,トラブルなどが発生した際に対処しやすいという2つの点です。また,WebサーバにNginxを利用しています。Nginxは,ApacheやIISなどと同じWebサーバで勢いがあります。

著者プロフィール

高林貴仁(たかばやしたかひと)

2011年9月入社。リクルートでは,Hadoop関連の業務に携わる。2012年4月より,ATL(アドバンスドテクノロジーラボ)配属。脳波を利用したアプリケーションの開発や,Node.jsなどを利用したアプリケーション開発に携わる。

2012年10月から,リクルートテクノロジーズ)として,R&Dの業務に携わる。

Twitter:https://twitter.com/tatakaba

Facebook:https://facebook.com/tatakaba

注)リクルート MIT Unitedは,2012年10月1日の分社化に伴い,リクルートテクノロジーズという機能会社に生まれ変わりました。詳しくはコチラをご覧ください。

コメント

コメントの記入