Contact us
   Blog

Blog

WEBサイトを構成するパーツを見てみよう

WEBサイトを構成する様々な要素の名前と役割を確認しておきましょう。チームで作業する時の共通認識として基本的な呼び名を覚えておくとスムーズです。
UIデザインでは「そのパーツがユーザーとどう繋がっているか」という視点が重要になります。また、WEBのUI全体に云える事ですが、AIがテキストを生成できるからこそ、デザイナーがコントロールする「ボタンの文言(マイクロコピー)」の重要性が増しています。

レイアウト

縦の列の事を「カラム」と呼びます。
WordPressを運用している方は、お馴染みだと思います。

横の行の事を「ロウ」と呼びます。

マス目状に並んでいるものを「グリッド」とよび、グリッドがコンテンツの長さに応じて可変されているものを「ボード」と呼びます。

ナビゲーション

WEBサイト全体のメニューを設置することを、ナビゲーションと呼びます。サイトの一番上部を「header・ヘッダ」最下部を「footer・フッタ」と呼びます。

ヘッダにあるものを「ヘッダナビ」または「グローバルナビ」

フッタにあるナビを「フッターナビ」と呼んだりもします。

「パーソナライズ」によるパーツの動的変化
AIはユーザーの行動に合わせて、表示するパーツをリアルタイムで切り替えることができます。全員に同じパーツを見せるのではなく、AIが「今、このユーザーにはこのボタンが必要だ」と判断して出し分けるため、ユーザーが「さっきあったボタンが消えた!」と混乱しないよう、一貫性と予測可能性をどう保つかというUIデザインの難しさがあります。

ページとブログの違い

標準的な仕様では、ブログ記事は時系列で管理することができるように、タイムスタンプ情報を保有しています。対して、通常のページは記事を書いた日時で検索しないため、時系列に並べることができません。

カレンダー

営業カレンダーやイベントカレンダーです。GoogleカレンダーをHTMLに埋め込んで活用することもあります。

GALLERY・VIDEO

PHOTOGALLERYや動画の埋め込み。動画はストリーミングサーバーを準備することもあれば、YouTubeにアップしたものを埋め込む場合もあります。

FORM

お問い合わせや各種フォーム

メールアドレスで手軽にお問い合わせができるシステム。ユーザーとの接触機会損失を防ぐ。お問い合わせや資料請求は最も重要なコンバージョン(CV)

SERACH

検索窓・検索結果のページ

検索窓および検索結果ページは、ユーザーが知りたい内容を単語で検索する為のシステムです。Webサイトの利便性を上げ、サイト内回遊率やコンバージョン率の向上に繋がります。

SERACH

コメント投稿、表示欄

コメント欄はユーザー生成コンテンツ(UGC)の創出に繋がります。 ユーザーがコメントを投稿することで、ページ内容が充実し、検索エンジンからの評価向上やファン化の促進が期待できます。

カート・決済機能

ショッピングカートと決済機能

現在ではクレジットカード・デビットカードで約7割、ID決済や電子マネーなど、多様なニーズに対応してカゴ落ち(途中離脱)を防ぐために、決済システムの導入が必須です。

ユーザーの為に信頼性と安全性: セキュリティ機能を担保したシステムを導入し、店舗側にとっても決済と受注の連動処理の効率化を図ります。

商品カテゴリー・商品一覧・商品ページ

商品カテゴリー・商品検索・商品一覧・商品詳細ページ

単に商品を見せるだけでなく、関連商品のレコメンドで回遊性を高めたり、購入へ繋げる分かりやすい導線が大事です。(転換率・CVR向上)

CHAT

チャット形式の会話

チャットボットデザインとも呼びます。対話形式である事をわかりやすく表現できます。

CAROUSEL

スライドショー・CAROUSEL

狭いスペースに複数の画像を表示できたり、動的コンテンツでインパクトを与えたりできます。

PRICE

価格表

価格表の定番デザインはテーブル型とカード型とあり、カード型はおすすめの料金が一番目立つようになっていたりしま。

FAQ

よくあるご質問

ユーザーにとっては質問に答えてくれ、会社側にとってはお問い合わせ対応のコスト削減になります。

SITEMAP

サイトマップ

ページの構成をマインドマップのように図式化したもの。

MUSIC

ストリーミング・配信

ダウンロードが完了していなくても再生できるように、動画や音声をデータとして分割送信するシステム。

LIST

リスト形式

関連項目を構造化したり可読性を高めるために使います。

TAB

タブ式(タブUI)

限られたスペースで多数の情報を掲載し、タブボタンで表示を切り替えることが出来、効率的。

POP UP

ポップアップ表示

ユーザーの注意を惹きつけて、バナーをクリックさせたりコンバージョン(反応)させることが目的で設置されます。

404

404エラー(Not Found)

存在しないページへアクセスした際に表示されるHTTPステータスコード。

UPLOAD

ファイルアップロード機能
htmlファイルのアップロード機能にJavaScriptのFileAPIでプレビューができます。

関連記事もお読みください

Let's talk

まずは無料で
相談してみませんか

初回ZOOM相談は無料です。制作の発注は不要です。
あなたの現状をお聞きした上で、最適な進め方をご提案します。

企画と制作の流れ

制作は リサーチとデザインと実装。リサーチや企画といった 情報を取り扱う工程。 そして、それを元にデザインする工程。デザインしたものを実装する工程。 中でも企画検討といった部分は上流工程と呼ばれ、独立して扱われることもあります。WEBサイトを作る際の思考法やブランディングのために必要なこと。知っておいて欲しい制作の知識や受発注の心得などをまとめました。

future

パーソナルブランディング

自分を知り伝え方を整えることは、AI時代を生きる個人やクリエイターにとって必携の技術。 「自分の見せ方」を学ぶことは、自己理解でもあり、未来の選択肢を広げる行動でもあります。 この研究会では、ノウハウを学ぶだけでなく、仲間と一緒に試行錯誤しながら、自分らしいブランディングを育てていきます。

Branding