1-3. リンク先の内容を具体的に表示する ボタンやバナーのマイクロコピーでは、リンク先の内容を具体的に表示することが大切です。 「詳しくはこちら」のような表現でリンク先の内容がわからないと、ユーザーはそこに知りたい情報があるのか判断できないために離脱する可能性が高いからです。 デジタルツールの大手メーカーであるAppleが“M1システムオンチップ”を紹介するページでは、リンクボタンに以下のようなマイクロコピーが設置されています。 出典：Apple これらのマイクロコピーによって、ユーザーはリンクボタンの先にどんな情報があるのかを一目で理解できます。 スマホが普及した近年は特に、サイトを閲覧するユーザーはその内容をじっくりと読んでいるというよりも、流し読みをしているケースが多いものです。 「詳しくはこちら」だとそれが何のことだったか記憶に残っていない可能性があり、理解するためにはページを遡

HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。 本書は『HTML/CSSブロックコーディング デザインをすらすら再現できる』の「Ch01　モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。 モックアップとは モックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色