フリーランスデザイナーの「つくること、はたらくこと」
話を聞いて、自分の性格や考え方の小ささ、狭さを痛感しました。クライアントに希望するデザインを聞いてはいけない。例として挙げていた、商品を紹介するサイトであれば、商品がどのようなものかを聞いて、それを元に進めていく方が大事。クライアントの趣味趣向は不要な項目になります。
また、制限や言い訳はデザインを狭める可能性があるという話。Web制作でよく使うレイアウトの配置で使うワイヤーフレームは、デザインを制限してしまう。DTPとかで文字サイズや行間がこう、みたいな一定のルールはありますが、自分がデザインして気持ちよいものを優先させた方がよいこともあります。
デザインでよく使う手法としては、表現したい項目をパーツに分ける、グループにまとめる、奥行きを考えるなどがあります。
デザインを考えることで重要なのは、自分がユーザーとなり、対象に対して興味を持って初心に返る、というありがたいお言葉を頂けました。
コーディングにおける支給デザインの解釈と展開
こちらは実際にデザインを制作するときの考え方について。Webサイトデザインを制作で使用するツールはPhotoshop CCが基本です。他にはIllustrator CC、MacのみSketchとなります。これは画像を書き出すときにアセット機能を使ってスマホ向け画像も書き出せるからです。また、Photoshop CCでは新機能としてアートボードが使えます。これを使えば、一つのファイルでPC用、スマホ用の画面を作ることができ、スライス機能を使って書き出せます。スピーカーの方はこの方法でデザインしていました。
最近のWebサイトのデザインはミニマルからマテリアルデザインと、シンプルな表現方法にシフトしていますが、シンプルなデザインはすごく難しく、デザイナーも悩んでいるようです。
私が疑問に思っていたことが、PC、スマホ共有で画像を書き出す際に解像度をどこに落とし込むか定まっていなかったのですが、72dpiではなく144dpiと高解像度で作った方が画像がきれいになるということがわかり、収穫でした。
マークアップエンジニアと円滑に連携するためのデザインプロセス
最後は制作を進める際にファイルの管理等をどのようにしていけばよいか、の話。 ファイルを更新する場合には、リネームして過去ファイルを残すようにしておく。デザインファイルはバージョン管理しづらいので原始的ですが王道ですね。また、レイヤーにつける命名規則もWebに持って行ったときにわかりやすく要素名などをつけるとよい。他にもfaviconなど必要な画像についても作っておき、文字サイズや色など基本的な表示についてはデザイン用のガイドラインを設けてわかりやすくしているようです。
Adobeが提供しているツールでCreative Cloud Extractが出ました。制作したデザインファイル（PSD）をアップロードして確認すると、CSS出力や余白の幅表示など、スライスで必要な作業を軽減してくれる素晴らしいツールとなっています。
他に気をつける点として挙げられていたのが、見出しなどのテキストが2行になった場合の見せ方が忘れられている件です。これら忘れられそうな項目も含め、デザイン面でしっかりと考えておかないと、開発がスムーズに進まずトラブルになる可能性があるので、気をつけたいと思います。
One thought on “SaCSS Special07 初夏のデザイン祭り”