カテゴリー: Webセミナー

2016年8月27日（土）18:00に札幌市民ホールで開催されたSaCSS vol.79に参加しました。北海道でフロントエンドエンジニアとしてで活動されているh2hamさん主催のセミナーです。 今回は、現場でディレクション業務に携わる方たちが実際の経験を基に、こうした方がよいことや注意したいことについてお話しになりました。

そういえば、ディレクションの話もっとしてほしいとお願いしたのですが、あれから音沙汰ないですねぇ。

ウェブディレクターとして考えたい「ウェブサイト構築内容の提案と見積のバランス」

トップバッターは株式会社ジャクスタポジションの西山さんから。 ディレクション時に必要な事として「ゴールの確認」や「決定権を持っている人の確認」がありました。ディレクションのセミナーではよく取り上げられる事柄なのですが、それだけ重要な項目だと思います。実際仕事で完成までもっていった内容が、クライアントは途中だと思い込んでいた、とか、クライアントの一番偉い人の鶴の一声でご破算になる、とかされたら作る側として途方に暮れますね。発注側と開発側で意識の統一は必要不可欠だと思います。

CMSがらみのサイトの受発注で確認すべきこと

次はウェビングスタジオの口田さん。 色々と気をつける点が上げられていましたが、コーディングを先に行う話が出ていました。今までのWeb制作ではデザインができてからコーディングに入る手法が一般的でしたが、CMSを導入する際にはデザインを待たずにコーディングを始めることが可能です。この手法だと完成後の手戻りを減らし開発効率の向上が見込まれるため、仕事で採り入れられる傾向が強くなっています。

画面設計のベストプラクティスを探る

3番目は小玉さん。あるプログラムを構築するときに、画面設計やその流れ、仕様などの決まり事をどうやり取りしていくか、苦労されているお話が聞けました。全体的な流れを広い視野で見渡せるかどうか、技術だけでは難しく、経験や担当者が必要だと感じました。

Web制作 手を動かし始める その前に

ラストは千野さん。こちらは企画書やプレゼンの話が興味深かったです。私も仕事柄書籍を漁ったり説明することも多いのですが、まとめるのも難しいですし、練習しておかないと上手に進めなかったりと、皆さん同じような苦労をされているんだなと思いました。

埋もれていた資料を見つけました。 6月25日（土）18:00に札幌市民ホールで開催されたSaCSS Special07に参加しました。北海道でフロントエンドエンジニアとしてで活動されているh2hamさん主催のセミナーです。 今回はスペシャルということでデザインを主役に据えて、日本で活躍されているデザイナーさんからWeb制作でのデザインについて現場のおもしろい（？）お話を聞くことができました。

フリーランスデザイナーの「つくること、はたらくこと」

話を聞いて、自分の性格や考え方の小ささ、狭さを痛感しました。クライアントに希望するデザインを聞いてはいけない。例として挙げていた、商品を紹介するサイトであれば、商品がどのようなものかを聞いて、それを元に進めていく方が大事。クライアントの趣味趣向は不要な項目になります。

また、制限や言い訳はデザインを狭める可能性があるという話。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行になった場合の見せ方が忘れられている件です。これら忘れられそうな項目も含め、デザイン面でしっかりと考えておかないと、開発がスムーズに進まずトラブルになる可能性があるので、気をつけたいと思います。