こんにちは、マチルダです。
9月も後半になり、すっかり秋めいてきましたね。アイスの食べ過ぎで増えた体重を戻すべく、お米を豆腐に置き換えて頑張っている今日この頃です。
さて、LIGにも新しいメンバーが加わり、デザインのチェックをする機会が増えてまいりました。
自分もデザイナーになりたての頃に、先輩デザイナーに幾度となく同じことを指摘され、それでも未だにやってしまう（そして見つからないうちに光の早さで直す）「うっかりミス」に焦点を当て、デザイン提出前にチェックしておきたいこと、改善方法として実践していることをご紹介したいと思います＾＾
【こちらもおすすめ】
LIGのデザイナー陣がオススメする、これだけは読んでおきたいデザイン本15選 新人デザイナーにおすすめ！自腹買い本5選 デザイナーにおすすめのウェブサービスとその使用例まとめ
のっち
マチルダ
野田
デザイン提出前にチェックすべき5つのこと
1. マージンは整えられているか
これは先輩に指摘されたランキングで堂々の1位を飾るほど、幾度となくミスを繰り返してきました。
特に焦っているときほど、「あとで調整すればいいや！」と後回しにしてしまい、結局忘れて提出してしまうことが多いです。非常に細かい部分ですが、ここをきちんと整えられるか否かでクオリティーに違いが出てくるので、自然と身につくまで繰り返しチェックしていきたい項目です＾＾
特にボタンの中の文字は目立つので厳重注意です。
実践した改善方法
慣れないうちは、とりあえず測ってみましょう。
自分は「整列・分布」ツールで揃えたあとに、選択範囲ツールで測ってしまうことが多いですが、Photoshop CCからは配置のときにガイドが出てくれる便利な世の中になっています。
テキストの後ろの余分な箇所は、カーニングで削るとセンターに調整しやすいですよ＾＾ これは先輩デザイナーについ半年くらい前に教えてもらったテクニックです。まだ実践したことがない方はぜひ！
2. フォントの調整はできているか
これは未だに難しく、日々奮闘しているものでもあります……。特に注意が必要なのは「カーニング」です。フォントは打ったままだと「文面」と「仮想ボディ」の関係でフォントごとに余白が異なるので、調整が必要です。フォントに関してはこちらの記事が非常に参考になるので、ぜひご覧ください！
【フォントの些事】第2回 Photoshopでの文字詰めとフォントのボディについて
もりた
あと、「・」「ー」「!」などはフォントによって大きさがまちまちなので、自分は倍率を調整しています。
実践した改善方法
とにかく色々なデザインを見て真似してみると良いと思います。
特に、自分は雑誌などの紙媒体は気にして見るようにしています。最初のうちは、何が正解かわからず混乱することもあると思いますが、身の周りのデザインの文字詰めを気にしてみることを地道に続けるのがポイントかなと思います＾＾
おまけ
Photoshopで文字詰めをする際には、「文字ウィンドウ」のカーニングオプションの活用がおすすめです！
特に日本語の文字詰めは、「オプティカル」を選択するとスムーズにいきます。文字詰めをいじりすぎて何が正解かわからなくなった方は「オプティカル」で心機一転するのもありです。
「オプティカルなんぞや？？」という方は、繰り返しで恐縮ですが、先ほどの記事をご覧ください＾＾ 全部書いてあるので自分もよく読んでいます。
3. 画像の処理を丁寧にできているか
グラデーションでマスクかける画像を処理するときにやってしまいがちな、うっすら線出ちゃってるよ問題。
特にデザインに慣れてきた頃にうっかりやってしまいがちなので、ズーム機能で細かいところまでチェックしてみる癖をつけると良いと思います＾＾
実践した改善方法
白い背景の場合に起こりがちなので、黒い背景を敷いてみると一発で確認できます。謎の線だけでなく、パス抜きの甘さも発見できるのでおすすめです！
4. ラインはもやっとしていないか
Webならではの項目ですが、ピクセルの概念で作業する場合、座標に小数点が入るとラインがもやっとしてしまいます。CSSで設定するからいいや〜！と言わず、細かい部分の積み重ねを大切にできると良いなと感じております！
実践した改善方法
「バウンディングボックス」でなんとなく広げてしまうときに、ラインがもやっとしてしまった……（経験談）
そんなときは環境設定をチェックしてみましょう！ Photoshopの「環境設定」から「ツール」を選択し、「ベクトルツールと変形をピクセルグリッドにスナップ」にチェックを入れると、バウンディングボックスをつまんで拡大縮小しても、もやっとならないです＾＾b
5. 構成資料と要素は合っているか
デザインとは少し離れるかもしれませんが、そもそもデザインに入る要素に抜け漏れがないか、誤字・脱字がないかの最終チェックを行いましょう。
もともとの原稿が間違っている（または間違っていると思われる）箇所や表記揺れ（例えば、「お申し込み」と「お申込み」が混在しているなど）を発見した場合は、担当者に確認を取るなど自主的に行動できると、プロジェクトの進行もスムーズになります。
実践した改善方法
PC上で構成資料（原稿）を両方見ながらチェックしていると、チェックする箇所を一つ飛ばしてしまった……などという事態が多発したので、時間が可能な限り、構成資料を印刷して赤ペンでチェックしたところ、ミスが減ったように思います！
余談ですが、印刷物の入稿などは、「赤ペンチェック」の他に二人一組で「読み合わせ」を行うとより確実です。一人のときでも、小声で声に出して読んでみるとミスを発見しやすくなるのでおすすめです＾＾
まとめ
いかがでしょうか？
振り返ってみると、最近でもやってしまったミスが多々あり、冷や汗が出てきました。もちろん、「マージンは絶対均等！ センター揃え！」が絶対ではありませんが、無意識にやってしまっているとしたら、少しでも意識を向けることが大切だなとしみじみ思っております。
初心に返って自分でも改善し、習慣にしていこうと思います＾＾
最後までお付き合いありがとうございました！
それでは、また！
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
