ここまで見てる？実装のポイント〜平原編〜

こんばんは！
東京から平原です＾＾

今回はそこまで見てるの？実装編
ということで、実務で納品する際のサイトの実装で
どこまで見てるのか、という基準のお話しです。

それではレッツゴー！

誰でもできる、でも忘れちゃう

いろんなポイントがあるんですが、
誰でもすぐできて、
でも、忘れちゃう。

というポイントがあります。

それは…

テキスト

これ、本当に忘れがちだし、、、
意外と意識していない方も多いんですが、

改行、スペース、、

一瞬で終わるし、本当に意識次第です。

では、テキストでどこをどう見ているのか？

どこをどうするべきなのか？

詳しくお話ししたいと思います。

テキストのチェックポイント

具体的には下記の3つです。

1.改行の位置
2.スペースの文字化け
3.全角半角の揃え

一つずついきましょうね！

1.改行の位置

これは。。。
もう気をつけるとかそんなレベルではないと思うんですが、
PCだと完璧だけど、
SPやtabだと…

ありがとうございます。
▼
ありがとうございま
す。

になっているみたいな…

デバイスの幅によって改行位置がずれてしまうことは
確かに良くあります。

だからと言って放置してはいけません。

めっちゃ読みづらくなるので、
文字数を少しだけ調整するとか、
デバイスごとにテキストを複製して、改行を変えておくとか…

ほんの小さな1作業で解決できることです。

それに気づけて、それができてこそ。

今日から意識してみましょう。

2.スペースと文字化け

コピペ等で貼り付けると
文字と文字の間にスペースが入ってしまう場合があります。

特にスプシやPhotoshopからコピペした時に、
改行が反映されずに半角スペースが入ることはあるあるです。

ここも放置しないでください。

スペースは削除し、文字は詰めてあげましょう。

よーく見ると、スペースが文字化けしていることがあります。

そうなると、明らかに違和感を感じてしまう原因にもなりますので、
要注意です。

3.半角・全角の揃え

最後はサイトを通して注意したいところ。

これはデザインも同じですが、
英数字の全角・半角はサイト内全てで統一してください。

また、カッコもよく混合しちゃうので、要注意です。

トンマナと呼ばれる、トーンマナー
そして、4大原則の反復。

これら2つの観点から、
デザイン全てで揃えていき、

謎の違和感は排除しましょう。

この違和感こそが、
ユーザーの注意を引いてしまい、
せっかくのデザインから注意を逸らしてしまうことに繋がります。

ほんの小さいことがとても大事

今回ご紹介したことは、
本当に小さな、些細なことです。

そのくらい適当でも…

と思うかもしれませんが、

小さな些細なことこそ、
反応率を考慮したデザインを制作する上で
欠かせない要素になっていきます。

逆を言えば、
その小さなことをちゃんと意識することだけでも
クオリティがグッと高まる、

ということです。

神は細部に宿る。

常に胸に秘めたまま、これからも制作してみてください★