UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

「コーディング」はデザインを実際にウェブサイトとして、ユーザーが見られる形にコードを書く作業のことを言います。

出てきたデザインをそのままコードに書き換えているだけのように思えますが、実は同じ見た目でも書き方によってサイトの使い勝手が大きく変わる場合があります。
中には一般の人では気がつかないような細かいこともありますが、ウェブに最適化されてこそ、良いウェブサイトなのではないでしょうか。

今回は見た目が同じでも作り方によって使い勝手が変わる例をいくつか紹介します。

クリック領域の確保

ボタンやリンクなど、サイト上にはクリックできる要素がたくさんあります。
そんなクリック領域ですが、実は書き方によってクリックが反応する領域が異なってきます。

<a>タグや<button>タグの領域を広く取っておくことで、クリック領域は広くなります。

仮にデザイン上はボタンっぽくない見た目になっていたとしても、ヘッダーメニュー内のリンクなどはクリック領域を広げておいた方がユーザーがクリックしやすくなります。

最適なタグを使っているかどうか

同じ見た目のボタンでも、使っている「タグ」によってフォーカスできるかどうかなど挙動に違いが出てきます。

見た目はCSSを使うことでいくらでも同じにできますが、<a>タグや<button>タグを使っているか、ただの<div>タグを使っているかによって、キーボードを使ってフォーカスできるかどうかが異なります。

正確には「<div>タグ」を使っていてもキーボードフォーカスはさせられるのですが、それ用に処理を別途書く必要があったり、考慮しなければならないポイントがたくさん出てきます。

「<a>タグ」を使っていればそれだけでブラウザ側でリンクだと認識して最適な動きになってくれます。

正しい読み方になるかどうか

「WEB DESIGN」のように、略語ではないただの英単語をデザイン上のあしらいとして全部大文字にする場合があります。

これを普通に大文字で入力していると、スクリーンリーダーなどの目が見えない人がウェブサイトを閲覧するための音声コンテンツで流す場合に「ダブリューイービー ディーイーエスアイジーエヌ」のように読み上げられてしまいます。

これは全部大文字なので、略語だと思ってアルファベットを読み上げられてしまっています。
HTML上は「web design」あるいは「Web design」のように単語として読める形にした上で、CSSの「text-transform」を使って全部大文字にします。

こうしておくと見た目は大文字ですが、読み上げ時にはきちんと「ウェブデザイン」と読み上げてくれるようになります。

見た目が同じでも使い勝手は変わってくる

今回紹介した例はほんの一部です。
このように見た目が同じでも使い勝手は変わってきます。

使うユーザーのことを考えると「見た目が一緒だしどっちでもいいよね」とはならないはずですし、今回紹介したことはどれもそこまで時間がかかることではありません。

同じように時間をかけるのであれば、細かい部分も意識していきたいですし、何よりこのような細かい話は知っているかどうか知識の部分が大きいので、しっかり情報を集め続けていきたいです。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！