Webサイト案件における初学者のジレンマ

初学者の方が Webサイト案件 を担当する際、本人視点では完成している認識でも、第三者視点では今一歩及ばないようなケースが存在します。
自分自身、初案件がまさにそんな状況だったので、注意喚起も兼ねて
ご紹介します。


初めての案件は、とある サービスLP制作 でした。
自分視点では限りなくデザインに近づけ、当時の技術ではこれ以上の再現は不可能とさえ感じていたため、ディレクターさんに確認してもらいました。


ただ、当時の僕のデザイン感覚はガバガバで、デザイン原案と比較した際に px単位 のズレが無数に存在していたため、結果的にそれら全てが修正点
として返って来ました。


そこで感じたのは、

クライアントさんは 整形 する感覚で依頼している。
なので「そっくりに作ったんで勘弁してください…。」では通用しない。

ということでした。


加えて Webサイト案件 では、レスポンシブ対応や、ブラウザの互換性も
関係してきます。そうすると、「正面は完璧だけど、横顔が…。」とか、
「外に出ると顔が崩れちゃう…。」的なことにもなってきます。


実際の 整形 であれば当然許容されませんが、如何せん初学者視点では
気づき辛い点も存在するので、今回は GAOGAO 内で 共有されている
Webサイト案件 の デザインチェック事項 の抜粋を下記に共有します。


# Webサイト案件 の デザインチェック事項

# レイアウト
- [ ] 各セクションの間隔を統一する
- [ ] 各コンポーネントの間隔を統一する

# テキスト
- [ ] タイトルフォントサイズを確認する (ex 24 ~ 28px)
- [ ] サブタイトルフォントサイズを確認する (ex 20 ~ 22px)
- [ ] テキストフォントサイズを確認する (ex 14 ~ 18px)
- [ ] 行間を確認する
- [ ] 改行位置を確認する
- [ ] 誤字脱字を確認する
- [ ] 文字揃えを確認する
- [ ] 不要なコメントを削除する

# 画像
- [ ] Retina対応する
- [ ] imgタグのalt属性を設定する
- [ ] 画像のアスペクト比を確認する
- [ ] 画像ファイルを 1MB 以下に圧縮する

# 送信フォーム
- [ ] 送信機能を確認する
- [ ] エラー文を確認する

# メニュー
- [ ] サブメニューの動作を確認する
- [ ] ハンバーガーメニューの動作を確認する

# その他
- [ ] OGPを設定する
- [ ] faviconを設定する
- [ ] SSL接続化する
- [ ] コンソール画面を確認する
- [ ] ページ内遷移の位置を確認する
- [ ] 水平スクロールを確認する
- [ ] 各デバイスで確認する
- [ ] 各ブラウザで確認する

etc...

抜粋ではありますが、以上の内容を確認した上でダブルチェックを依頼すれば、ある程度修正内容の軽減に繋がるかと思います。どれも最低限の内容ではありますが、初学者の方は是非参考にしていただければ幸いです。


- 次回 (8/17)
「Mac mini の メモリ を自前で換装してみた話」