自社WEBサイトのリニューアル

MotherHeadsのディレクションとデザインを担当しているDJKazuです。ハンドルネームで失礼します。弊社は京都でWEB制作会社として2018年に4月に創業し7月に開業いたしました。何事にも創業から開業までバタバタしていたため、ページスクロールのライブラリをつかったサイトを急遽立ち上げて、そのままの状態だったので2期目の2019年中には自社のWEBサイトのリニューアルをすることを計画しておりました。そして、ついにリニューアルすることができ公開までの運びとなりました。

設計と仕様について

今回の主旨は

静的なスタテッィクではなく動的なCMSにてWEBサイトを制作することでした。動的にすることでCMS特有の機能でアップをすることでFTPでアップするよりもより使いやすい運用をすることでコンテンツの発信をスムーズにしていくこととしています。今回の大きな目的としては初回のCMS選定は特になく来年中に弊社が得意とするconcrete5に移行をすることを視野にいれています。concrete5にする際に運用して蓄積したデータのエクスポートとインポートを可能にすることによりconcrete5への移行ができることにより、さらに得意分野を増やすことにつながります。そしてお客様にもご提案の幅が今よりもさらに広がるからです。アクセス解析もよりもっと多角的に取得し、マーケティングの材料となるため弊社のお客様にも情報共有ができるのではないと考えています。

設計ですることは

CMSで運用するため、CMSデザインを意識しております。弊社ではCMS構築の際は必ず静的なサイトのコーディングをいたします。それをスタテッィクといって社内で言葉の共有もしています。スタテッィクで制作する上でCMS特有のレギュレーションを重視し、CSSも保守および拡張性をもたせたつくりですすめるようにしております。そうすることで時間が経過しても管理性の高いものにしCMS構築にはいっても安心できるように心がけています。ただし、今回concrete5へ移行する際はHTMLの修正は必要になることもわかった上で制作しています。

仕様での決め事

仕様に関しては、まず自分たちで運用する場所を明確にしています。逆になにか大きな変更がない限りはあまり触らない部分も明確にしています。この線引きを必ずしています。運用フェーズに入れば、更新してサイトのコンテンツデータを溜め込めるようにしていきます。

構成とデザインについて

構成の切り出し方

構成をきるにあたって、弊社のフロントエンドエンジニアと協議することに時間を費やしました。
ヘッダーをfixさせて追従させるか否か、ブレークポイントはどこにして早めにハンバーガーメニューにみせるなど、他にもありますがサイトで共通する部分のパーツにはかなり議論して時間をかけました。
今回初とした試みではメインビュジュアルには自社で制作した動画を設置し、インパクトのあるメインビュジュアルにしております。また見た目だけではなく、スマートフォンでは動画の読み込みを停止させるように制御して静止画1枚のみにし、スマートフォンユーザーにデータ容量の負担を軽減させるようにするということも構成段階で決めていました。さらに動画だけではなくTPOに応じて静止画1枚パターンやフェードパターンやカルーセルにもすぐに変えられるようにしています。

これが実際に編集したメインビュジュアルの動画です。MotherHeadsのタイトルとロゴなどが表示されていないので見やすいと思います。撮影は5分ぐらいの動画になります。編集でスピード、補正、カット編集で28秒までにしてあります。特に難しいことはせずに動画の素材をそのまま生かして使うことを重点にして編集してあります。

デザインの取り組み方

デザイン時にはコンテンツ重視しています。さらにレスポンシブに特化したカラムで組んでいくことにしています。見せたい順番なども構成にいれたどおりに再現しています。特に注力したのはスマートフォンで見たときにトップページが長くなりすぎないようにも考慮しています。1カラムより2カラムを採用しても見にくいのをなくしています。コンテンツ内にカルーセルを導入することでサイトの長さを軽減しています。カルセールを入れることにより生じるデメリットも承知した上でやっています。さらにPC版でみたときよりもSP版でみたときにコンテンツの量もトルことにより短すぎず長すぎずということにしています。

コーディングとCMS組込みについて

弊社特有のコーディング

まずデザイナーでもある私もコーディングには参加します。大枠なCSSの設計などはエンジニアと協議していきます。弊社ではデザイン、コーディングすべてに対してレビューをおこないます。多角的にみて検証や確認を必ずしていきます。とくにCMSを前提にしたつくりだとCSSは大事になってきます。デザインでは文字量を一定ではなく多かったり少なかったりを想定して制作します。画像がはいったときはいらなかったりしたときもデザインでおこしています。基本となるポイントはすべて表現してからコーディングにはいります。コーディングの際はgulpを使い、pugとscssでコーディングしていきます。この作業によりスタテッィクサイトを爆速で全ページ制作します。gitでデータ管理や進行把握をします。さらに、お互いがブランチをきりプルリクというカタチをとりマージして共有しています。この工程でもレビューはかかさずやっております。

CMS組込み時は

まず、すべて共有できる環境を用意してそこから構築をはじめます。データベースはあらかじめ共有をし、作成したデータファイルはgit ftpでpushしてテストサーバーにデプロイをかけます。これらはエンジニアだけでなく、デザイナーの私もしております。それ以外に重要なことは構成時にCMSで使用するCMS仕様書を構築前にはつくっておき共有をしています。

最後に

チームでのあり方

弊社ではひとりの力で制作することが大事ではなく、いかにチームとしてその力を存分に発揮しお互いのいいところを共有していくことを重視しています。もちろん、各々ひとりでも制作はできますがチームとしてやる面白さがあると思っています。コミニュケーションを大事にし共有する方法をたくさん持ち、お互いの考えを取り入れながらすることで、その力は100%から200%や300%にしてクリエィティブをしていこうとしています。チームでしないと見えないことはたくさんあり、ひとりではルーティーン作業になることもチームでやれば、それもなくなるのではないかと日々感じています。今回はすべての集大成の第1弾としてみていただければと思います。