この世で一番好きな食べ物はカレーライスの佐伯です。

弊社でデザインとかいろいろやっています。

今回の記事は、このブログを作ったときのフローを書いていこうと思います。

①方向性を決める・必要項目を洗い出す

Cc43282c 8518 4e30 b851 fce583dd3989
担当者全員で、最初にミーティングを行いました。
その時に、制作の目的や狙いたいターゲットを決めていきます。

今回は同年代のエンジニアだったりデザイナーだったり。
8592dce5 2808 4246 8dd3 4be4b2063188

今回は割と自由にできたのでいろいろあれこれ考えながら作業することができました。

②ラフスケッチ

いろんなサイトを見て観察して、目的に沿ってそうな要素を考えてラフに起こしていきます。
F7fa5f31 8dde 42cb baa2 b2cd2808080c

ここでの目的は、サイトの全体像を把握したり、必要な機能やデータを明確にしていったりします。

③共有

構成や構想を伝えるためのラフスケッチが、ある程度出来上がったら再度ミーティングで詰めていきます。

デザインに応じて、必要なもの不必要なものもわかってくるので、スケジュールも立てやすくなります。
この際、ディレクター、フロントエンド、バックエンドと共通認識を持っておくと今後の作業がとても楽になっていきます。
F434d259 75b0 4b1a bce1 59a1481092cd

WEBの強みとして、公開後にブラッシュアップしていくことができる点があります。

ここでの共有事項ではフルバージョンを共有していましたが諸事情によりフルバージョンではなく、
要素を削った状態で6月1日でのリリースに間に合わせることとなりました。
そのため、機能をすこし削ったものをリリースすることとなりました。

随時更新していきますので、楽しみにしていてくださいね!

④データ作成

ラフスケッチでの共有が終わったらデータを作っていきます。今回使用したのはPhotoshopCCです。

Photoshopを選んだ理由は、次工程で実装作業をするフロントエンドエンジニアの使用するソフトがPhotoshopだったからです。
C7b48866 0dc7 424c ae8e 7de8f4f951ec

ホバーやクリックの際のアニメーションなども、レイヤーカンプという機能で見やすくしていきます。

※案件や最終的な実装者や現場によってこの使用するソフトは変わってくるかと思います。

⑤実装

出来上がったデータをもとに、フロントエンドエンジニア、バックエンドエンジニアがガリガリコードを書いていきます。

フロントエンドが主にビジュアル部分の実装をしていきますが、その際にデザインでの相違がないかを随時確認していきます。

一番最初のミーティングや、その後のラフスケッチ辺りでしっかり仕様を詰めておかないと、この時に手間が増えてしまいフロントエンドエンジニアさんとバックエンドエンジニアさんに迷惑をかけてしまいます・・・!

74e46c38 765d 4699 bd63 0c4dd9b0a3ff

今回も、ディレクター兼フロントエンドエンジニアの中尾さん(Hawk(と呼ばれたい。。。))さんとビジュアルを随時あれこれ言い合ったりしていきました。

⑥リリース

実装の終わったサイトを一般公開していきます。

F70cc67f 52d5 4b1b 9e35 f4edf8bef75e
92de85ac 68fc 4933 96bd 6134a67ed86c
今回、公開するまでにある程度の数の記事もあった方がよいという裏事情により、メンバーがいっぱい記事を書きました。読んでみてください。

今後は、このブログ記事だけでのイイネ的なやつも追加したりする予定ですので、楽しみにしていてください!

まとめ

簡単にですが、以上が当ブログを作った時の大体の流れとなります。
あくまでワークフローの一つですので、案件によって・メンバーによってやりやすい流れは変わってくるかと思います。その都度、ベストなパフォーマンスができるとよいですよね!

Shere
  • はてなブログ
  • Twitter
  • Facebook
ブログサイトを作った時のフロー(主にデザイン編)

Writer

  • Name

    佐伯 明紀

  • Position

    デザインとか

  • Profile

    もともと紙系のデザインなどをやっていましたが、転職を機にWEBデザイン関係の仕事に就くことになりました。自分なりに頑張っていこうと思いますのでよろしくお願いします。作業用BGMとして映画の予告を延々と流すことにハマってます。