拝啓デザイナーさんへ。フロントエンドエンジニアの私からお願いしたいこと8つFront End Programming

拝啓デザイナーさんへ。フロントエンドエンジニアの私からお願いしたいこと8つ

UX/UI

フロントエンドエンジニアのかみーゆです。
長年、フロントコーディングをしているとどうコーディングするんだ!ヤラレターってデザインカンプが届きます。
私の持論ですが「Webデザインは紙とまったく違う」です。
自由に好きなところにあれこれオブジェクトを配置できないです。コードに落とし込むためには制限とルールがたくさんあります。
ということで今回はウェブデザイナーを目指すなら、これだけは抑えて欲しいポイント8つをまとめました。

1. お願い!カラーモードはRGBで!

カラーモードがCMYK。イラレやフォトショでデザインカンプが上がってきたときよくあります。

紙とウェブでは色の出力モード違いますよ!!必ずRGBで作ってください。。。。

最近はXDの登場のおかげでこの問題はだいぶ減りました。
良い時代になった。

2. ちょっと待って。フォントサイズ、考慮してください

フォントが超小さいデザインカンプを受け取ることがあります。
Google Chrome での最小フォントサイズは10pxです。そのほかのブラウザでは1pxまで小さくできるみたいですが、Chromeの世界でのシェア率は64.67%です。

browsershare.png

世の中の半数以上が使っているChromeに合わせるのが○ですよね。

Browser Market Share Worldwide

CSSでtransform: scaleなどでムリやり縮小すれば10px以下の文字サイズにすることはできます。

 

が、よく考えてください。

なぜ小さなサイズが設定できないか考えたことありますか?


ユーザーは情報を得るためウェブサイトに訪問します

せっかくの情報が読みづらいと思いませんか。

 

Googleの推奨するフォントサイズは16pxです。

 

ユーザーへの思いやりよりデザイン性を優先してませんか?

ユーザーはデザインの良し悪しを評価するためにサイトへ訪れているわけではなく情報を閲覧しにきているのです。

 

文字サイズへの配慮、忘れないでください。

3. コントラストのつかない色をたくさん使わない

表などのグレーの枠線で使用している色の種類がやたら多い事があります。
デザインカンプ通りにするか、相談してどちらかに揃えるようにお願いするか頭を悩ませることがあります。

みんながレティーナ(高機能な)ディスプレイで見ているわけじゃないので、そんな大きな違いが出ないこともあります。

安いラップトップPCのモニターで見たら全部同じ色ですよw
無駄にコードが増えます。

 

そして、たまに背景に溶け込んでしまいそうなくらい、薄いグレーの文字を見かけます。

最低コントラスト比は4.5:1です。

この達成基準の意図は、(コントラストを強化する支援技術を使用していない) 中度のロービジョンの人がテキストを読めるように、テキストとその背景との間に十分なコントラストを提供することである。
WCAG 2.0 解説書コントラスト (最低限):達成基準 1.4.3 を理解する

WCAG20 コントラスト比について

 

コントラストのつかないのであれば色数は抑えたほうがいいです。

オンラインのコントラストチェッカーがあるので調べてみるのもアリですね。

contrast-checker.png

4. リンク・ボタンはモバイルでタップするサイズを考慮する

Google曰く、ボタンの推奨サイズは縦横共に44px以上です。これはおおよそ成人男性の指でもタップできるサイズです。
やたらめったら小さいと、誤操作にもつながります。
モバイルデザインでは指で操作することを一番に配慮しましょう。

デザインカンプを受けとってコーディングするぞーってなった時に、ボタンサイズが小さいと気分が萎えます。

5. PCとスマホはセット。最低この2つを用意してはじめてデザインカンプです

ウェブサイト用のデザインカンプでPCだけでモバイルが用意されていないことがあります。
PCを参考に作ってよー」ってデザイン支給する人たまにいます。

スマホとPCって訪問するユーザーの属性結構違うし思っておいて欲しいです。
ユーザビリティ考えるとPCと同じデザイン使い回せないこともあります。

タブレットまでとは言いませんが、せめてスマホのデザインも作ってください。

最近はウェブサイトの種類によりますがスマホから流入するケースが多いんですよ。

本来であればスマホのデザイン優先して作った方がいいです。

個人的にはデザイナーなのに一番見られる箇所になぜ注力しないのかが不思議。

6. モバイルのハンバーガーボタン配置したならドロワーメニューもデザインして

モバイルのデザインカンプにハンバーガーボタンはあるのにドロワーメニューがなくて「テキトーに作ってー」って言われることがあります。

その時の私の心理状態はこちら。

 

テキトーってなにw

 

メニューって実際にあまり開かれることはありませんが、大切な機能であることには間違いないです。

必ずデザインを用意しましょう。

7. レスポンシブするものにムダなピクセルパーフェクト求めないで

最近ピクセルパーフェクトで少しTwitterが持ちきりになりましたが、私はピクセルパーフェクトどっちでも良い派です。

デザインがきっちりしっかり設計されていたら喜んでやります。逆のケースだとぶっちゃけ地獄です。

ピクセルパーフェクトは必要なのか? HTMLコーダーの考え方まとめ

Screen_Shot_2020-11-12_at_12.55.28.png

再利用できないパーツだらけの無秩序なデザインカンプをピクセルパーフェクトにするのはめっちゃ工数かかります。

そして、ウェブサイトはレスポンシブで幅が変わります。

デザイナーがピクセルパーフェクトを求めるあまり、コンテンツが収まりきらない場合もあります。WordPressなどの動的サイトだとレイアウトが崩れることも。。

 

ウェブのお作法に沿ってないデザインカンプでもその通りに作ることを強いるデザイナーさんがたまにいます。
どうしても再現できなくてたくさんのパーツが画像になったこともorz

 

せっかくのテキストが画像じゃSEO的にも意味ないし、せっかくコーダーとしてはとても悲しかったです。

8. HTML、CSSの性質を知った上でデザインを

ウェブサイトはHTMLやCSSで作るのでそれなりのお作法があります。

HTML5になりタグの数も108個に増えコーディング方法もセマンティック(意味のある)になりました。

構造がしっかりすればウェブサイトとしても解析されやすくなりますし、ユーザーも理解しやすくなります。

HTMLとデザインで作ったパーツが紐づかないとウェブサイトとして破綻すると思うんです。
そうなると、ウェブデザイナーはやはりHTMLをある程度理解できていることが前提条件となります。そして、CSSにも制約があります。

 

ウェブデザインは感覚だけではできません

 

紙デザインがシールを好きなようにペタペタ貼って仕上げていくのに比べ、ウェブデザインは積み木に近いと思っています。

しかもウェブデザインは大枠の構造がほぼ一緒です。

HTML構造とCSSの特性を知った上でデザインされたカンプが届くと飛んで喜びます。

反省・マサカリを投げずに制作に入る前にガイドラインを決めておく

ちなみにここからは私のこの一年の反省です。

1164456_s.jpg

「再現できねーよ!」って言って差し戻す(差し戻せないこともあり。。。)より、先にガイドラインを決めておく。
そうすれば手戻りが減ってみんなハッピーでしたね。

例えば、以下のような項目です。

 

  • 基本のフォントサイズ
  • 使用する基本の色
  • コンテナーのサイズ
  • モバイル・PCのデザインカンプのサイズ

 

「言わなくてもそのくらいわかるでしょう」って思いがちですが、、、阿吽の呼吸なんて存在しません

 

今後、私もマサカリを投げる前に先に取り決めておこうと思います。
今までたくさん投げてごめんちゃい。

まとめ・機能性 を優先してデザインされたウェブサイトがエラい子!

コーダーもデザイナーもディレクターもお金をいただくクライアントではなく根本はサービスを使うユーザーに向くべきなんですよね。
ユーザーが心地よくそのサービスを使えてはじめて良い製作物と言えるのではないでしょうか。

デザインは建物などの設計と同じ!機能的に設計してユーザーに心地よいを届けたいですね!

合理的な思考のデザイナーさんの作ったデザインカンプはコーディングしてて気持ちいいです。

散々デザインに関して要望を書きましたが、私もデザイナーさんに怒られないようフロントエンドエンジニアとして精進します。


長くなりましたがこの記事がウェブ制作のヒントになれば幸いです。

最後までお読みいただきありがとうございました。

関連記事もあわせてお読みください

Read More Blogs

Web制作に関する人気の記事

セブ島・海外移住に関する人気の記事

キャリアアップ・ライフスタイルに関する人気の記事

管理人について

IT戦士:かみーゆ

「銀ねこアトリエ」へようこそ!フロントエンドエンジニアのかみーゆです。

  • 日本でフロントエンドを中心に約10年Web制作
  • 2019年4月「MacBook Pro とスーツケースだけで生きていこう」と、セブ島に移住
  • セブ島に転職してエンジニア講師
  • オフショア開発担当者
  • 疲れたので辞めてプータロー
  • 人生の充電中でセブ島ライフを満喫(イマココ)

好きな人といるだけでパワースポット!今は大好きな仲間と消耗しない働き方をするために計画中。
13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。
「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me