Webデザインにおける「見えづらい」こだわりハック

thinaks（シナクス） デザイナー愛媛県松山市在住

2003年　楽天ショップの運営

2007年　松山市内のWeb制作会社 入社　　　　 更新・運用担当 → Webデザイナー

2012年　フリーランス（6月より）

経歴

Saeka Abe

自己紹介。

今年もいろいろありました。

増えました。レスポンシブWebデザイン。

ツールも言語も進化。

フレームワークも続々登場＆進化。

制作工程も変化しつつある。

マルチデバイス時代のアプリ制作を助けるPhotoshop厳選機能紹介http://www.slideshare.net/woopsdez/ss-28549539

FireworksがCCへのアップデートが行われないことが今年5月、発表。

Adobe、Web画像ツール「Fireworks」終了へ-ITニュースhttp://www.itmedia.co.jp/news/articles/1305/07/news030.html

何のツール使う？

それとも次世代版Fireworks待つ？The future of Adobe Fireworkshttp://blogs.adobe.com/fireworks/2013/05/the-future-of-adobe-fireworks.html

オープンソース化を祈る？Adobe.com: Release Adobe Fireworks to Open Sourcehttp://www.change.org/en-GB/petitions/adobe-com-release-adobe-fireworks-to-open-source

新たなるツールを待つ？TRIBALOIDhttp://tribaloid.com/

デザインカンプ制作…。なくなるのか？

No！だと思う。

バリエーションをたくさん作るとき

凝ったビジュアルの制作

クライアントに確認してもらいやすい

本日は制作＆日頃の対応細かいところまで

見なおしてみましょう。

『見えづらい』こだわり《技術編》

『見えづらい』こだわり《対応編》

1.2.

簡単に本日の流れ。

まとめ - こだわるわけ。3.

『見えづらい』こだわり《技術編》

•基本打ちっぱなしにしない

フォント・組版

→カーニング、行間、インデントなど

1

ここがWebデザインの評価を低く見られる原因だと思ってます。

•読んだ時に違和感がないように

フォント・組版

→ 適切な改行、ひらく・ひらかない文字

2

テキストに関しては改行考慮は難しいですが、画像化するテキストに関しては気づかったほうがいいですね。

Webデザイナーのためのタイポグラフィと文字組版http://www.slideshare.net/swwwitch/web-10114816

フォント関連は詳しくはこちらで解説されてます。ぜひご一読を。

Webデザイナーのためのタイポグラフィと文字組版（Reloaded）http://www.slideshare.net/swwwitch/cssniteginza72takano

こちらも同様にご一読を。

•レイヤー名には画像名を書く

→ちなみに有料サイトからの カンプ素材はサイト名と画像番号を記載

レイヤー・グループ・ ファイル整理

3

自分も受け渡された方も、いざ、探すときに手間取らないように。

•非表示レイヤー、余計なファイルは削除

•　　 シンボル　　 スマートオブジェクト はなるべくラスタライズ＆削除

レイヤー・グループ・ ファイル整理

4

特にシンボル・スマートオブジェクトに関しては気をつけましょう。コーダーさんより「余計なの消したのに重い！」と見えないクレームが…。

•レイヤーが多い場合はグループ化を

レイヤー・グループ・ ファイル整理

5

これもコーダーさんより「探すのに手間取る！」と見えないクレームをいただくことがあります。

•ファイル名はID_ページ名_日付_カウント

→制作ページが多いとさがしづらい

→やたら多くなったら　デザイナー版Githab「Pixelapse」を　使う手もあり

レイヤー・グループ・ ファイル整理

6

特に大型案件で複数のデザイナーさんと制作するときはルール決めしておきましょう。

Pixelapsehttps://www.pixelapse.com/

こういうのもあります。今後に期待。

•エッジのボケは消す

スライス考慮・精度向上

変更→ピクセルにスナップ（Ctrl＋K）で調整もし角丸ではなければ、『処理をしない』にしておくとベター

『エッジに整列』にチェック

環境設定→一般→『キー入力』0.5px

7

コーダーさんに見えないストレスを与えてしまいます。なるべく解消しておきましょう。

エッジのボケ きれいにすると…

たかがボケ、されどボケ。

•極力ズレが起こらないよう、単位のピクセル設定とグリッド・吸着設定を

スライス考慮・精度向上

8

設定でなるべく防止しておきましょう。

編集→環境設定→ガイドとグリッド

Fwの方はこちらで設定。

初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む)http://designcolor-web.com/2012/05/29/photoshop-first-setting/

Ps使いさんはこちらに良くまとめられていますので、ぜひご一読を。

Illustratorのカンプとうまく付き合う方法http://www.slideshare.net/taqnishitani/illustrator-15064209

Aiはこちらが非常に良くまとめられています。Ai使いさんはぜひご一読を。

•配置は拡大してチェックを

→設定してもやっぱりズレる時はズレます

スライス考慮・精度向上

9

人の目でのチェックは大事です。

•長方形ツールで角丸の半径で角丸図形を作ったら、グループ解除をしない

CSSプロパティを使用するコーダーさんのために

限定 10

これは意外にFw使いさんでの落とし穴です。

Fireworks CS6の角丸設定で「CSSプロパティ」を使うならここに注意！http://blog.bright-flavor.com/fireworks/entry-77.html

以前、私のBlogでまとめたものです。詳しくはこちらで。

•写真、アイコン、配色、ライティング文章はできる限り事前に準備を

→事前の準備があればあるほど完成度は高くなる

スムーズに制作するために

11

スケジュールの問題もありますが、なるべく揃えておいた方がベターです。

•制作にとりかかえる前に何を作らないといけないのかをチェック

→OGP画像、Favicon、iOSアイコンは　不意を突かれやすい

スムーズに制作するために

12

チェックリスト作っておきましょう。

•背景画像の処理

→切りっぱなし？フェードアウト？繰り返し？

スムーズに制作するために

13

時々、繰り返し系（木の板、テクスチャなど）は繰り返しを考慮されずに配置されてしまうことがあります。

•切り抜きに手を抜かない

→汚れが残っているのに気づかない場合が

スムーズに制作するために

14

特に制作サイトの背景色が同じの場合、モニターが違うと指摘されることがよくあります。

•テキスト幅に余白を残さない

→たくさん集まると…

スムーズに制作するために

15

画面上はFwです。PsやAiの場合、余白部分をクリックすると選択されて、その下に配置している画像を選択したいのにできない、ということがあります。

コマンド→テキスト→幅を設定→テキストフィールドの幅を0に

Fwの場合はこれで直せます…がPsとAiは直せる機能はないようです…。

•指示はなるべく制作ファイル内に！

→メールや別紙に書いてても　忙しいと以外に見てくれなかったり　見落とされることが多い

スムーズに制作するために

16

メールで書いてても、見落とされることよくあります。

Specctrhttp://www.specctr.com/

最近はこういう便利な拡張機能ができました。Lite版もありますので試してみてください。

•リストのはじまり、背景色ののびは2行以上になった時の状態も考えて作っておく

スムーズに制作するために

17

カンプの時にこのように作ってた場合…

背景のが下にのびるようにされてなかったり、リストのテキストが折り返した時に点の前に来てたことがあります。

•基本的にダミー文章を入れない

→なかったら自分で作るか　別の参考サイトの文章を仮に入れる　リニューアルなら現サイトから持ってくる

完成に近い形を作るために

18

注：別サイトから文章入れた時は必ず「仮文章です」と伝えて、最後には必ず直してください。

カンプ制作時 実際にサイト制作

文章を実際に入れるとチグハグになって結局デザイン直した、ということがよくあります。

•テキストはデータでいただく些細な部分でも手打ちはしない

→誤字脱字の防止と責任の所在

ライティングチェック関係

19

少しだから…と思って手打ちすると、間違う確率が高いです（体験者は語る）。

→ボックス外に隠れた文章が　出てくることがある

→アルファベットの大文字小文字、　半角・全角、空白、改行の　入り乱れをチェック・変換がしやすい（要設定）

ライティングチェック関係

20

ボックス内文章は以外に盲点なところです。

•WordやExcel、パワーポイントで届いた時は一旦テキストファイルへコピー＆ペースト

ちなみに私はEmEditor（Windows）でチェックしてます。最初に設定は必要ですが、一発で空白・タブ、全角半角などのチェック、一発変換可能です。

•紙に印刷→ 指差しチェックしながら、声を出して、誤字脱字確認

•余裕があるなら時間を置いてもう一度みなおし

•関係者以外の人にチェックをお願いする

ライティングチェック関係

21,22,23

声出しチェックは効果あります。恥ずかしいかもしれませんがぜひお試しを。

日本語文章校正ツールhttp://www.japaneseproofreader.com/

こういうチェックツールもあります。なんか日本語の使い方に違和感あるな…と感じた時に使うといいかと。

•詰まったら、どこでもいいから別の部分を作るそれでもできなかったら紙にラフを描いて疑問点洗い出し

→テストの時の回答と同じ。

少しでも早く作るために

24

どこでも何でも手を動かした方が頭も動きます。

『見えづらい』こだわり《対応編》

•「急がば回れ」袋小路に入ったら一旦状況を見直したほうが結果として早い

スピードより確実さを重視する時

25

パニックになった時ほど状況確認と見直しを。

•デザイン制作の途中段階でエンドクライアントに見せない

→制作レベルを誤解される可能性がある

スピードより確実さを重視する時

26

他、完成でないけど「これでいいよー」と満足されてしまって、「もっと作りこむ予定だったのに…」と悶々とした気持ちになることもあります。

•「簡単だから」は悪魔のささやき？

言葉の表面だけを受け取らない

27

簡単だからこそ、用心してつくりましょう。むしろ、「君ならできる！」と頼りにされてる、と思うのが一番！！

•クライアントが「それでいい」と言ったから

…それ鵜呑みにしても大丈夫？

言葉の表面だけを受け取らない

28

担当者でOK→最終決定者で大量修正…という通称「最後のどんでん返し」というのを起こさないように。

•気になった部分は何らかの形で報告・チェックすること

怠ったばかりに大きな事件に発展することも

「直感」は大切に

29

チェックはみんなを救います。本当。

•状況に応じて連絡ツールを使い分ける

コミュニケーションは小さな積み重ね

30

シチュエーション・相手の年代によってちゃんと使い分けた方が、相手に対する印象は違ってきます。

•頼むときは「やってもらって当たり前」の意識で言わない

コミュニケーションは小さな積み重ね

31

仕事なので当然だろ、と思うかもしれませんが、「上から目線」的な言い方はどこかで何らかの形で返ってきます。必ず。

•考えている時に後ろからいきなり指図することは避ける

コミュニケーションは小さな積み重ね

もし、指示するのであれば「ちょっと時間いいかな？」などワンクッション言葉入れてから、質問するのがいいかと思います。

32

•忙しい時ほど、相手にも自分にも少しでいいから気づかいを。一杯のコーヒー、一個のチロルチョコがみんなを救う

コミュニケーションは小さな積み重ね

33

もちろん、お茶でもミルクでも飴でもOKです。何か口に入れるだけでも気分が落ち着きます。

•「いつもありがとう」「あの時はごめんなさい」の言葉は忘れずに

コミュニケーションは小さな積み重ね

34

当たり前の言葉だからこそ大事です。

•普段からの行動は大切に

コミュニケーションは小さな積み重ね

35

仕事を依頼されるかどうかはここにかかります。

•休むときは休む。寝るときは寝る。遊ぶときは遊ぶ。ごはんを食べるときは食べる。趣味に没頭するときは没頭する

健康第一！

36

自分の気持ちは大切に。

•自分の体からのメッセージを無視しない

健康第一！

37

忙しいと無視して、終わった後で一気に来た…なんてことあります。持続して仕事する場合は、5分でもでいいので気づかいの時間を。

•体調が悪いと思ったら即休む or 病院へ

健康第一！

38

ガマンしてたら悪化してしばらく入院…ということもあります。

•健康だからデザインできる！

→当たり前田の(ry

健康第一！

39

仕事ができない、ということは自分もそうですが、会社にもクライアントにも大きなダメージを与えます。ぜひ日頃から管理を！

まとめ - こだわるわけ。

制作には『流れ』があるから。

良くも悪くも自分の行動が後工程に関わる人へ影響する（しわ寄せになる）

※『Webデザインの新しい教科書』より抜粋

小さな行動の積み重ねで『見えないレッテル』を

貼られてしまう

どうせなら、いい『レッテル』を貼られたい

『神は細部に宿る』素晴らしいところは芸術作品や良い仕事は

細かいところを仕上げており、こだわったディティールこそが作品の本質を決定する。何事も細部まで心を込めて制作しなければならない。

流れも一緒にデザインを。見えるところだけがデザインの仕事ではありません

いつの時もその先にいる『人』の存在を忘れずに

まとめ