カテゴリー別アーカイブ: Webデザイン

Webサイトにおける「ボタン」の基礎知識

img_300_200

普段Webサイトを使用する中で、何気なく見ているボタン。 こうしたボタンはカートへの商品追加、フォームの送信、コンテンツの削除など、様々なアクションと繋がるパーツです。もしボタンが作動しなかったり、違う場所に遷移するようなことがあれば、ユーザーは大きなストレスを抱えてしまうでしょう。ボタンが正しく機能することは、Webサイトにおいて非常に重要です。 &nbs…続きを読む

  • このページを共有する

OGP画像の役割と作り方

img

OGPとは「Open Graph Protcol」の略で、WebページがSNSでシェアされた際にタイムラインなどに表示されるサムネイル画像やページタイトル、説明文などのことを指します。 OGPを適切に設定することによって、タイムラインを見ているユーザーにWebページの内容を伝え興味を喚起させることにより、サイトへの訪問を促すことができます。 OGPは表示させ…続きを読む

  • このページを共有する

ジグザグ型レイアウトの落とし穴

s-300x200

横並びの画像と説明文のセットが段落ごと、互い違いに配置されているのが「ジグザグ型レイアウト」です。雑誌等における自然な視線の流れとして有名なZパターンレイアウトの仲間にあげられることもあります。普段Webサイトを閲覧していて見た覚えがある、という方も多いでしょう。   しかしジグザグレイアウトは意外にも「Webページの流し読み」の観点において注意が…続きを読む

  • このページを共有する

【Webデザイントレンド】コーナーナビゲーションとは

【Webデザイントレンド】コーナーナビゲーションとは

近年のスマホ普及拡大の影響もあり、画面を広く使えてデザインの自由度が高まる「コーナーナビゲーション(画面四隅に配置されるナビゲーション)」のWebサイトが増えています。 「コーナーナビゲーション」とは? もともと、Webサイトのナビゲーションといえば画面上部や左右どちらかにまとめて配置するレイアウトがスタンダードとされていました。 一方、コーナーナビゲーショ…続きを読む

  • このページを共有する

失敗しない色の伝え方

失敗しない色の伝え方

コーポレートカラーがある企業はもちろん、そうでない場合でもWebサイトで使用する色はとても重要な意味を持ちます。 なぜなら企業の第一印象を決める要素になるからです。   使いたい色がある場合は、社内のWeb担当者やデザインを依頼する制作会社に正しく伝える必要があります。すでに使用できる色が決まっている場合は、イメージを壊さないように制作を進めていく…続きを読む

  • このページを共有する

認知負荷を軽減するための5つのポイント

認知負荷を軽減するための5つのポイント

自社のWebサイトを作っていると、こんなことはありませんか。   どれもユーザーに見てほしくて、1つのページに情報を詰め込みたくなる 他社との差別化がしたくて、自社の強い独創性を押し出したくなる などなど しかしそれはサイトを訪れるユーザーに、余計なことを考えさせすぎるかもしれません。 ユーザーにモノを考えさせすぎる状態、これを「認知負荷」と言いま…続きを読む

  • このページを共有する

Webサイトでは顔を出した方が良い3つの理由

Webサイトでは顔を出した方が良い3つの理由

御社のWebサイトでは、従業員やお客様の顔写真を掲載していますか? 「恥ずかしいから」「悪用されそうで怖いから」「顔に自信がないから」などの理由から、顔出しに後ろ向きの方も少なくないのではないでしょうか。 しかしWebサイトで顔を出すことは不安要素以上に、大きなメリットがあります。 今回は顔を出したほうが良い3つの理由を紹介します。 理由:1 安心・信頼感が…続きを読む

  • このページを共有する

流し読みパターン一覧!ユーザーはWebサイトをどう見る?

流し読みパターン一覧!ユーザーはWebサイトをどう見る?

Webサイトを訪れたユーザーは、ページを流し読みすることがほとんどだとされています。実際にこの記事を読んでいるあなたも流し読みしているでしょうし、記事を書いている私自身もそうです。   ではなぜ流し読みするのでしょうか。 理由は、 パソコンやスマホで文字を読むのが単純に疲れるから(紙よりも読む速度が25%遅くなるといわれています) Webサイトは「…続きを読む

  • このページを共有する

これが最新版!フッターの役割

これが最新版!フッターの役割

フッターはWebサイトのページ最下部にある要素です。 一般的にはサイトマップやWebサイトの運営者情報(会社名・住所・電話番号などの連絡先)、コピーライトなどが記載され、基本的にはWebサイト全体で共通の要素・デザインを使用します。 ページ上部に表示されるヘッダーとは違い、フッターは下までちゃんとスクロールしないと見えない場合がほとんどなので蔑ろにされてしま…続きを読む

  • このページを共有する

デザインシステムを理解しよう!定義・メリット・導入事例まとめ

デザインシステムを理解しよう!定義・メリット・導入事例まとめ

みなさんは、「デザインシステム」をご存じでしょうか。 Webサイト制作やアプリケーション・サービス開発、ブランディング等を行う仕事でない限り普段からデザインシステムに触れるシーンは少ないですが、そういえばうちの会社のサービスにもあったな、なんて方もいるかもしれません。   デザインシステムを活用するシーンは例えば 大規模なデジタルプロダクト※をデザ…続きを読む

  • このページを共有する