簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

5分で読める攻略法!サイトPRフェステイバル入賞のヒント~その3~

コメント募集!.png
⇒ 今すぐチェック

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
★ プロのWEBデザイナーがこっそり教える「魅せる」サイトの作り方

基本は、レイアウト

レイアウトとは、「配置」や「設計」を意味します。
Webサイトを構成する文字や画像のレイアウトは、
「記事の読みさすさ」にも繋がるため とても重要 です。
今回は基本原則である「整列」を中心に、レイアウトについて説明していきます。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

【きちんと整列させて見やすく】

整列とは、テキストや画像をきちんと整列させて配置することです。
実際に見比べてみましょう。

sort_01.gif

▲記事のテキストをバラバラに並べたデザインです。


sort_00.gif

▲こちらは左に揃えたデザインです。

この2つを比べてみると、適当に並べたテキストより、
左に揃えたテキストの方が統一感があり、
読みやすい構成になっていると思います。

テキストを整列させることで、デザインに統一感が生まれ、
ユーザーに認識してもらいやすくなります。
テキストだけでなく、画像を扱うときにも同様です。

Check→ 画像を整列させる   ★表示

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

【整列の種類と効果を知る】

整列には、左揃え・中央揃え・右揃えがあり、それぞれ違った効果を生みだします。
目的に応じて使い分けましょう。

sort_mihon.gif

★左揃え

文章の場合、左揃えがもっとも読みやすいレイアウトです。
人の視線は左から右に移動するので、左端が揃っていると安心感が生まれ、
デザインも引き締まった印象になります。

--------------------
★中央揃え

中央揃えは、左右対象になり、バランスがよく感じられますが、
左端が揃わないので目線移動の負担が大きくなります。
ユーザーに文章を読んでもらいたい場合は、中央揃えにするのはNGです。

効果的な使い方は?

中央揃えは、ユーザーの視線を集めたい時に使うと良いでしょう。

--------------------
★右揃え

右揃えも同じく、次の行に視線を移すときの負担が大きいため、
右揃えは文章で使うと読みにくくなってしまいます。

しかし、効果的な使い方もあります。
例えば文章の終わりなどに、注目させたい要素を右揃えにすると
自然にユーザーの視線を誘導することができます。

sort_right.gif

▲例えば、AMSテンプレートの「詳細はこちら」ボタンは右揃えになっています。

--------------------

  AMSのテキストの整列機能

sort_ams.gif

▲エディターの整列機能から選択できます。
 (初期設定は左寄せです)

Check→ 記事入力について   ★表示

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

【アクセントでメリハリをつける】

一口にアクセント…といってもその方法は様々ですが、
ここではテキストを使って違いをみてみましょう。

accent_02.gif

▲テキストがほぼ同じサイズのため、パッと見て何が言いたいのかわかりにくい印象です。
更に、見出しタグ(=記事のタイトル)が無いため、記事同士がくっついて見えてしまいます。


accent_03.gif

▲見出しタグを作成、画像を挿入しました。


同じ内容の記事でもメリハリがついて、印象的なデザインになりました。

強調したいところは色を変えたり、斜体にしたり、太文字にしたり
様々な方法でメリハリを付けることが可能です。
文字だけでなく、記事の内容に沿った画像を付けるだけでも
充分なアクセントの要素になります。

Check→ テキストにアクセントをつける   ★表示

--------------------

★見出しタグを付けるメリット

●  Webサイトに関する重要なキーワードが含まれるため、
 検索エンジンも検索順位を判断する材料としている=SEO的にもメリットがある

●  ニュースや新聞のヘッドラインのように
 閲覧者は記事の概要をひと目でつかむことができます。

Check→ 7秒間で閲覧者の心を掴まないと離脱してしまう   ★表示

--------------------

⇒ あなたのサイトをさっそく見直す!!

prev_p.gif ヒント 1 2 3 4 5 next_p.gif

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

いかがでしたか?
皆さんのサイトがより良くなるためのヒントになれば嬉しいです。

完成した際には、ぜひ皆さまのサイトをPRくださいね。
 ⇒ 詳細はコチラ

現在開催中のサイトPRフェスティバルの評価ポイントもアップしますし、
AMSチームがTwiiterやFacebookでサイトのPRをさせていただきます。

プロの視点でさらに良いサイトにするためのアドバイスも実施中です。
 ⇒ プロのアドバイス『その1』

第2回サイトPRフェスティバルの〆切は、11月18日(日)です。
皆さまのご参加お待ちしております。


 
常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】平日9:00~18:00 /土曜10:00~17:00

平日9:00〜18:00/土曜10:00〜17:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ