![見出し画像](https://assets.st-note.com/production/uploads/images/128406778/rectangle_large_type_2_5aaca771269207dc4e84b78afb5729ec.jpeg?width=1200)
Web制作を学んでいると気になる3選。もはや職業病かもしれません。
4月のITエンジニア転職に向けてWeb系の勉強をしています。html, CSSなどで作成の仕方がわかるようになると、これまで気にならなかったことが気になります。
みなさんも、新しいことを覚えると、見え方が色々変わることはありませんか?例えば、note記事を書き出すと妙に法律や言葉の表現が気になる。SNSを始めると人気の投稿のインプレッション数が気になる。教習所に通うと街中の標識が気になる。
今日は、僕がWebページ制作を学ぶ中で、気になってしまう内容を3つお伝えします。もはや職業病かもしれません。同じように学ぶ方や、仕事でWebページ制作されている方に共感していただければ嬉しく感じます。
1.位置ずれが気になる
アイコンの位置ずれが気になります。開発途中のアプリでも多く感じます。
例えば、未読通知の数字①②の数字とOがズレていることがあります。ボックスの中の文字が中央ではなく、上や下に寄っているのも見たことがあります。
画面の大きさの拡大縮小に対応する(レスポンシブ対応)ページでよく見るなと感じています。
これらは、操作するうえで大きな支障はありませんが、見るたびに気になってしまうのは職業病かもしれません(笑)
![](https://assets.st-note.com/img/1705889827791-khyVd9agpg.png?width=1200)
![](https://assets.st-note.com/img/1705889837123-a2xtGxtjwL.png?width=1200)
2.UI/UXボタンの名前が気になる
Webページ上に登場するアイコンの名前が気になります。理由は、開発中に人に修正箇所を説明しようとしても、はじめのうちは名前がわからないからです。僕はよく、スクリーンショットを取って、「このアイコンです!」のように説明していますが、名前がわかれば、説明がスムーズです。
UI/UXボタンで色々検索すると、面白い名前が多数出てきます。例えば、ハンバーガーメニュー、ケパブ、ミートボール、弁当メニュー、カード、ウィジェット、トースト、トグル、ピッカーなどなど。調べればきりがありませんが、楽しみながらやっています。
こちらの方の記事が参考になるかと思います↓
3.余白が気になる
不自然な余白や背景色の変化が気になります。例えば、セクション間の余白が異様に広い、狭い。一部分だけ間隔が異なると、どんな設定か気になります。他にも、背景色が途中で切れてしまっている場合。こちらは、文字数が多いときに、はみ出てしまっているのをよく見かけます。
(例えば、下のように、段落間隔が異常に広い場合。わかりやすいように意図的に広くしています。)
僕も作成していてよく陥るのは、自分が意図せずに自動で設定されている余白に惑わされます。例えば、ブログの見出しには自動で余白が設定されています。知らずにさらに余白を作成すると、過剰に空間ができてしまうことに。
入念に調べますが、時間がなくて焦っていると、間違えることが多いと感じています。自分も意識して確認します。
4.さいごに
Webページ制作の勉強をする中で、ついつい気になるポイントを3つお伝えしました。いち早くマスターして、仕事ができる状態にします。
また、制作の裏側を知るからこそ、エンジニアやデザイナーさんにHPの改修を依頼する時は、相手に配慮して伝えるようにします。いつも、色々指摘してしまってすみません。
今年は予定通りエンジニアに転職!良い仕事をして、依頼者のお役に立ちます!!!
今日はこの辺で。ありがとうございます。
この記事が気に入ったらサポートをしてみませんか?