初めまして。アシスタントディレクターの小池です。

ブログに書くのがちょっと遅くなりましたが、festivoさん主催の”ウェブデザインcamp”に参加してきました。

ウェブデザインcampとは

ウェブデザインcampとは、若手起業家のコミュニティfestivoさんが定期的に開催するWebデザインのセミナーです。
コンセプトは

「とにかく作れるようになる」です！

昨秋に入社し、業界経験が浅い私にとってはうってつけのセミナーだったので、いい機会だと思い参加してきました。

日程

1日目〜Photoshopで実際にデザインしてみる編〜

2日目〜Sublime textで静的にコードを書いてみる編〜

1日目〜Photoshopで実際にデザインしてみる編〜

10:30

セミナー会場到着。
参加者は、自営業の方、自動車会社の方、現役のバックエンドエンジニアの方などなど職種は多岐にわたり、改めてWeb関係の知識の需要が高まっていることを感じました。
理由も様々で、「自社ECサイトを開設したい」「Web会社に外注しているがコストが高いので自分でなんとかしたい」「サーバーサイド一本でやってきたのでフロント側も触ってみたい」など、それぞれのご職業よってお悩みも異なるようでした。

11:00

photoshopでの実制作に入る前に、Web制作全体のワークフローを説明していただきました。

Web制作のワークフロー

①戦略
②企画
③設計
④デザイン
⑤コーディング
⑥開発
⑦テスト・公開

今回体験するのは④と⑤です。

導入部分では、現役Webデザイナーである講師の方から「Webサイトを作る上でやってはいけない２つのこと」をレクチャーしていただきました。その２つとは・・・

ただ作ってしまうこと

これは上のフローのうち①と②をごっそり飛ばしてしまうということです。Web制作にお金がかかるということをご存知の方はゾッとするのではないでしょうか。戦略を練らなかったために、誰も来ず、誰も買わない、そもそも存在を気づかれない、「ただあるだけのサイト」が出来上がってしまいます。

アーティストになってしまうこと

これはWeb制作を始めたばかりの人が陥りやすいトラップです。「好きな色」とか「好きな雰囲気」をプロダクトに反映してしまい、サイトの目的がブレてしまう状態です。デザインに入る前には、要件や目的に合ったトーン&マナー、どうすればユーザーに対してアプローチできるかをきちんと考えましょう。

13:00

食事が済むと、いよいよphotoshopを用いたデザインの実践に入ります。
１日目のゴールは、「イチからデザインする」・・・ではなく、「完成図を目指して素材を組み合わせる」と言った方が良いかもしれません。
上達のコツは、

「とにかく真似する」
「たくさん作る」

だそうです。ここでもアーティストになってしまうと上のコツを守っていないことになってしまいます。

今回制作するデザインはこちらです。

基礎的な内容なので、細かい工程は割愛します。

実際にphotoshopで作ると以下のようになりました。

17:00

1日目のカリキュラムはこれで終了です。

2日目〜Sublime textで静的にコードを書いてみる編〜

10:30

会場到着。2日目は1日目に作ったデザインの通りにブラウザで表示できるようにhtmlとcss構築をやってみる内容です。

11:00

そもそも何でデザインのままではWebサイトにならないの？というところからご説明していただきました。
たまにお客さんからデザインチェックの時に「もうできてるじゃん！」と言われるそうです。

ブラウザ対応の大変さ

商材としてWebデザインを扱っている場合は、すべてのブラウザで問題なく表示できてないといけません。
ブラウザによって解釈が異なるので、Web業界者はブラウザ対応を苦労して行う必要があります。
講師の方はデザインからコーディングまでフルスタックで行う方なので、ブラウザ対応の大変さには実感が滲みでておりました。

12:00

本日はphotoshopの素材をスライスするところから始まりました。
僕もたまに仕事でやることはありますので、おさらいですね。

13:00

すべての画像データのスライスが完了すると、いよいよコードを書いていきます。
今回は現在一般的なHTML5とCSS3を使って進めていきます。

ちなみに私はコーディングに関しては経験値が足りないので、今回はいい勉強になりました。
特に、floatプロパティを指定された要素に対する回りこみを解除する方法などは、独学でやっていたら何時間も原因がわからずグルグルしていたことでしょう。

コーディング入門的なサイトは他にもいっぱいあるので細かい工程は割愛します。

完成しました。

ブラウザで表示するとこのようになります。

以上で２日間の工程が終了しました。

フローは知っていても、自分で作業してみると意識が変わりますね。

まとめ

2日間の日程が完了し、Webデザインの「いろは」の部分を習得することができました。

・ひたすら真似をすること

・たくさん作ること

・目的を決め、達成のための戦略を練ること

・アーティストにならないこと

今回のcampで教わった事は、野球で例えるなら「バットの振り方」「ボールの投げ方」のようなものです。

「いいプレイの仕方」というのは、それこそたった1日間だけではわかるようなものではなく、プレイヤーの数だけそれぞれのやり方があります。しかし制作の土台として、以上の点を意識しておくことが必要です。