見出し画像

Web制作を学んでいると気になる3選。もはや職業病かもしれません。

4月のITエンジニア転職に向けてWeb系の勉強をしています。html, CSSなどで作成の仕方がわかるようになると、これまで気にならなかったことが気になります。

みなさんも、新しいことを覚えると、見え方が色々変わることはありませんか?例えば、note記事を書き出すと妙に法律や言葉の表現が気になる。SNSを始めると人気の投稿のインプレッション数が気になる。教習所に通うと街中の標識が気になる。

今日は、僕がWebページ制作を学ぶ中で、気になってしまう内容を3つお伝えします。もはや職業病かもしれません。同じように学ぶ方や、仕事でWebページ制作されている方に共感していただければ嬉しく感じます。


1.位置ずれが気になる

アイコンの位置ずれが気になります。開発途中のアプリでも多く感じます。
例えば、未読通知の数字①②の数字とOがズレていることがあります。ボックスの中の文字が中央ではなく、上や下に寄っているのも見たことがあります。
画面の大きさの拡大縮小に対応する(レスポンシブ対応)ページでよく見るなと感じています。

これらは、操作するうえで大きな支障はありませんが、見るたびに気になってしまうのは職業病かもしれません(笑)

数字の位置ずれ
背景色が途中で切れてしまっている

2.UI/UXボタンの名前が気になる

Webページ上に登場するアイコンの名前が気になります。理由は、開発中に人に修正箇所を説明しようとしても、はじめのうちは名前がわからないからです。僕はよく、スクリーンショットを取って、「このアイコンです!」のように説明していますが、名前がわかれば、説明がスムーズです。

UI/UXボタンで色々検索すると、面白い名前が多数出てきます。例えば、ハンバーガーメニュー、ケパブ、ミートボール、弁当メニュー、カード、ウィジェット、トースト、トグル、ピッカーなどなど。調べればきりがありませんが、楽しみながらやっています。

こちらの方の記事が参考になるかと思います↓

3.余白が気になる

不自然な余白や背景色の変化が気になります。例えば、セクション間の余白が異様に広い、狭い。一部分だけ間隔が異なると、どんな設定か気になります。他にも、背景色が途中で切れてしまっている場合。こちらは、文字数が多いときに、はみ出てしまっているのをよく見かけます。
(例えば、下のように、段落間隔が異常に広い場合。わかりやすいように意図的に広くしています。)



僕も作成していてよく陥るのは、自分が意図せずに自動で設定されている余白に惑わされます。例えば、ブログの見出しには自動で余白が設定されています。知らずにさらに余白を作成すると、過剰に空間ができてしまうことに。

入念に調べますが、時間がなくて焦っていると、間違えることが多いと感じています。自分も意識して確認します。

4.さいごに

Webページ制作の勉強をする中で、ついつい気になるポイントを3つお伝えしました。いち早くマスターして、仕事ができる状態にします。

また、制作の裏側を知るからこそ、エンジニアやデザイナーさんにHPの改修を依頼する時は、相手に配慮して伝えるようにします。いつも、色々指摘してしまってすみません。
今年は予定通りエンジニアに転職!良い仕事をして、依頼者のお役に立ちます!!!

今日はこの辺で。ありがとうございます。

この記事が気に入ったらサポートをしてみませんか?