インターン8日目
みなさまこんにちは！ハシバです。５月もあっという間に中旬ですね。あと２週間でインターンシップが終わってしまいます。残念ですが悔いのないよう勉強に励みたいと思います。
本日もデザインカンプ制作を行い、なんとかカンプ完成させました～
なかなか疲労感です。次の工程はスライス、そしてコーディングです。サイト制作まだまだ先が長いです。
本日はデザインカンプ制作の方法についてお伝えします。
デザインカンプ制作とは
デザインカンプとは簡単に言うと完成見本です。「モックアップ」と言われたりすることもあります。デザインカンプを作る理由としては製作者、クライアントのサイトの完成イメージを固めることです。クライアントにサイトの完成イメージを持ってもらい出来上がりのときの不安をなくします。言葉だけでは伝わらないことは多いので、見てもらうことが重要です。この時点なら多少の修正可能です。
制作するソフト、サイズを決めて制作していきます。制作使用ソフトは人によりさまざまですが、Photoshopが一般的です。Photoshop以外にはIllustrator、Fireworksなどのソフトを使用します。個人的に思うPhotoshopで制作するメリットは
- 写真の加工性能が高いこと（当たり前ですが）
- スライス作業が簡単
この２点です。今回はPhotoshopを使用し制作をしました。
次に制作サイズを決めます。PCのモニタサイズは様々なので好みがあると思いますが、960PXが多くのWEBサイトで使用されています。はじめてサイト制作をする方は960PXで制作することをオススメします。（最近だとスマートフォンの普及でモバイルサイトから作る場合もあります。）
作製方法は設定したワイヤーフレームを元に制作していきます。ワイヤーフレームを元にしてもいきなりサイトのデザインは難しいと思うので、最初のうちは参考のサイト見て制作することをオススメします。参考サイトなしで作ると後々後悔します。私も最初そうでしたが出来上がりの完成度全然違います！
注意点
カンプ作りにはいくつかの注意点があります。私がよく訓練校で指摘されたのはフォントです。
- テキスト文字の場合はフォントをMS Pゴシック、アンチエイリアスOFFにする。
画像として切り抜くフォントは綺麗なもので良いのですが、テキストの場合だとダメです。理由としては実際の出来上がりと変わってしますからです。クライアントにカンプを見てもらい、その後完成したサイトを見てもらったときのにフォントが違うと問題が生まれす。サイトカンプはあくまで完成見本なので、しっかりルールを守り制作しましょう。さらにコーディング時にも困ります。テキストを変えていないとコーダーが画像なのかテキストなのかどちらか分からなくなります。自身で制作を行う場合はわかりますが、分担して作業を行う場合は間違うおそれがあるのでフォントの使用は注意しましょう！
テキストを綺麗に見せたい場合はGoogle FontsなどのWEBフォントを使用しましょう。
まとめ
デザインカンプ制作とても根気のいる作業です。カラー選定、上下左右の感覚だったり文字サイズ、文字間隔など細かい作業が非常に多いです。煮詰まったときには他の人に見てもらうことをオススメします。悩んでいたことが意外に簡単なことで解決したりします。私も先生やクラスメイトで見てもらい何度もやり直しました。
あと制作は保存とバックアップしっかりしましょう！！