箇所別のカスタマイズ可能コンテンツの説明

カラーリングは基本的にどのようにも選択可能です。　ビジュアル的に同系色でシンプルにまとめます。

WEBでのカラーリングの参考になるサイトはこちら

原色大辞典

WEB色見本 原色大辞典 – HTMLカラーコード 色の名前とカラーコードが一目でわかるWEB色見本

背景に単色を使うか、画像もしくは動画を使用するかも選択できます。

通常、企業の会社案内的サイトの様に閲覧者(ターゲット)を特定しない用途の場合はできるだけシンプルに上品なイメージを担保するため白または薄いグレーが使われ、キャンペーンや特定の商品・サービスのためのサイトではそのターゲットに好まれそうな配色をします。マーケティング的によく言われるのは黒系統が主のクール系配色は男性が、ピンク系の配色は女性が好む、とかいったことで、作るサイトの目的に応じて配色の良し悪しも自ずと決まります。サイトは作り手(サイトオーナー)側の視点からではなく、閲覧者側の視点に立って構築しないと、せっかくのサイト(ホームページ)が自己満足になってしまい成功が遠くなる恐れがあるので、カラーリングを含めたデザインよりもコンテンツの充実、閲覧者にとってのより良い情報の多寡が求められます。

以下の5通りのなかから、いずれかを設定できます

(1) ヘッダーナビをロゴの下に置く

(3) ヘッダーナビをロゴの横に　(左寄せの例)

(4) スマホのようにハンバーガーメニューにする

(5) ヘッダーの代わりに右サイドに固定する

　　※コンテンツ量の少ないページ向き

(1) ヘッダーナビをロゴの下に置く

(2) ヘッダーナビをロゴの上に置く (写真にはありませんが)

(3) ヘッダーナビをロゴの横に　右寄せor左寄せ

(4) PCでもスマホのようにハンバーガーメニューにする

(5) ヘッダーの代わりに右サイドに固定する

訪問してくれた閲覧者が見たい情報にすぐにたどり着けるように案内するのが主たる目的なので、単ページへのリンクだけでなく、情報種別ごとに、どこに何が掲載されているのかの道案内のために、ページ内リンクを駆使してユーザビリティを向上させます。ページ下部まで閲覧した訪問者が、次のページや欲しい情報の掲載箇所に辿り着きやすいようにするためにフッターにもナビを置く、どこからでもまたトップまで戻れるボタンを付けておく、といった配慮もまた不可欠ですね。

(1) 游ゴシック

(2) ヒラギノゴシック>メイリオ

(3) Noto Sans JP

(4) 明朝体 (Noto Selif JP)

いずれかを選択可能、公開後の変更も可能です。サイト全体のデザインイメージ、デザインコンセプトからいずれかを選びます。

いずれも、「スマートフォンでも見やすいサイトができる」「ブランディングに効果がある」「SEO効果がある」といった視点で採用されているフォントです。ただし、例えば明朝体は一部のアンドロイドスマホ機種では端末にインストールされたフォントにはないのでゴシックで表示されるなど、フォントは閲覧側の端末の仕様に左右されるケースも多々あります。

・トップページにサイドバーを表示するか
・投稿ページにサイドバーを表示するか
・固定ページにサイドバーを表示するか
・アーカイブページにサイドバーを表示するか
・サイドバーを左右どちらに置くか
が選択できるようになっています。そのサイトの用途や情報量によって決めます。

通常、企業の会社案内的サイトやブランドサイトの様に遷移するページが多くない場合はサイドバーを置かず1カラムにしてページ遷移することなく閲覧者が欲しい情報に辿り着きやすくすることを考えます。自治体のホームページなどの様に開示すべき情報量やカテゴリーが多岐に亘る場合、また商品紹介サイトやアフィリエイトを行うサイトなどではサイドバーは重要な要素になりますがそうでない場合は閲覧者の導線をすっきりさせるためにサイドバーのない1カラムが良いとされます。優先されるべきはサイト訪問者の利便性、ユーザビリティです。また必要に応じてですが、CTA (Call To Action＝特定の行動を促すためのボタン)をサイドバーに置くことも一般的です。

以下の4通りのなかから、いずれかを設定できます。

初めての訪問者が最初に目にとめるのがメインビジュアルであり、初見で持つイメージが決まる重要性が高いポイントとなる部分、コンテンツです。

(1) 単体の画像
(2) 複数画像のスライド(5枚まで)
スライダーの動き方
・フェードイン
・横方向にスライド
・同一幅の画像が並んでいて横に流れるカルーセル(回転木馬)スライダー
・中央に大きい画像、左右に見切れている画像が並ぶカルーセル(回転木馬)スライダー
(3) 動画
(4) メインビジュアルを表示しない
・例:沢山の画像が無限ループしているスライダーを置く、など

(1)～(3)では画像or動画の中にキャッチフレーズをテキストで表示させる、なども可能です。
動画の場合は端末での読み込みが遅くなるのを考慮して、端末のブラウザが動画を読み込んで表示してくれるまでのポスター画像を設定しておくのも必要な事で、それが可能になっております。ここに置く動画は尺の短い、長くても40秒までのものが適しており、それ以上長いと容量が大きいのでスマホなどの通信容量によってはサイトの表示に時間が掛かり過ぎるなどの悪影響が出てしまいます。※動画の読み込みの間、サイトが閲覧できる状態になるまで表示されないと検索エンジン対策(SEO)にも不利益になってしまいます。そのため前述のポスター画像を設定しております。

WEBサイト(ホームページ)内に「お知らせ(ニュース・インフォメーション)」や「サイト内ブログ」を置きます。
店休日や臨時の休日、新しい商品の発売などといった「お知らせ」記事や、経営者やスタッフの日常などを伝える記事が公開・更新できます。時系列によっての概念がないのが「固定ページ」で、日付別で更新されるお知らせやブログ的記事を「投稿ページ」と呼びます。投稿ページはカテゴリー分けすることが出来て、カテゴリーごとの記事一覧ページが作成でき、記事を更新するたびに自動的にリストとして追加されていきます。

これらの「新しくサイトに追加される情報」は閲覧する「人」だけではなく検索エンジン最適化対策(SEO)にとっても重要で、日常的に頻繁に更新情報が(Googleを始めとする検索サービスに)発せられることで検索サービスでのサイトの評価が高まり、好循環を起こしてくれる有用かつ重要な要素となっています。閲覧する「人」の側でも「一度読んだ記事」だけしかないのでは再訪する気になりにくいですが、記事が頻繁に更新されていれば「見に来る」動機づけになり、結果的に「サイトや企業・店舗のファン造成＝常連さん獲得」に繋がりますので、ぜひマメに記事を更新・追加されることをお勧めいたします。また、作成するホームページでは、Wordpressに標準に組み込まれている「更新通知」のみならず、検索サービスに更新を知らせてクローラーの訪問を促すためのPUSH通知プラグインを導入しております。

投稿リストのレイアウト設定　以下の6種類があり、表示する場所ごとに選択することが可能です。

(1) カード型
(2) リスト型
(3) リスト型(左右交互)
(4) サムネイル型
(5) ブログ型
(6) テキスト型

頻繁に記事が追加更新されるサイトの場合なら、メインビジュアルの直下に、またはメインビジュアルの代わりとして、記事スライダーを設置することも可能です。それにより訪問者が直感的にその記事にアプローチすることができるようになっています。例えばライブハウスの公演情報やフリーマーケットの開催情報などといったものが適した用途のひとつです。

利用されているSNSサービスへのリンクが各サービスのロゴで、所定の位置に設置できます。利用されていない(アカウントがない)SNSは表示されません。

Facebookページ
X(Twitter) ページ
Instagram ページ
TikTok ページ
楽天ROOM ページ
LINE ページ
Pinterest ページ
Github ページ
YouTube ページ
Amazon欲しいものリスト

これとは別に、投稿ページには自身が利用していないSNSでも閲覧者が「いいね」やシェアできる主要SNSのボタンが記事下とサイドのフローティングに表示されます。

イマドキはSNSでのクチコミや連携が必要不可欠、自身が利用していないSNSであっても、サイト閲覧者がサービスを利用していて、閲覧者が自分のアカウントから当該記事に「いいね」やシェアをして貰えるかもしれない機会を担保するものであり、自身が利用していないSNSだから不要だ、というものではありません。