資料ダウンロードお問い合わせプライバシーポリシーサイト運用お役立ち情報ポータルサイトのデザインで差をつける!成功事例から学ぶヒントとアイデアサイト運用お役立ち情報CMSを中心に、Webサイトを運用する上で役立つ情報を毎月更新!コーポレートサイトやポータルサイトなど、さまざまな分野でご活用いただける知識です。次の記事:ポータルサイトの集客力を上げるSEO対策のポイントと実践方法はじめにインターネットには日々、多くの情報があふれています。その膨大な情報の中から、何のヒントもなく自分にとって必要な情報を探すことは不可能といえます。その膨大な情報をまとめ、ユーザーが検索しやすくするために利用されているサイトが、ポータルサイトです。この記事では、ポータルサイトにとはどのようなものかという基本的なことから、ポータルサイトのデザインについて作成時に注意すべき点などを解説していきます。「バンプレストナビ」まとめポータルサイトとはポータルサイトの「portal」は、日本語で「玄関」や「入口」という意味です。Webブラウザを立ち上げたとき、最初に表示されるさまざまなコンテンツへの入口となるWebサイトを総称してポータルサイトと呼ばれています。JAPAN」や、検索エンジンに特化した「Google」などがポータルサイトの代表例です。ポータルサイトによっては最新のニュース、天気予報、辞書など、さまざまなコンテンツが掲載されているため、ひとつのサイトで知りたい情報を短時間で知ることができます。ポータルサイトは、各Web上にある情報が集約されており、ユーザーは、ポータルサイトの検索機能を使って、自分が知りたい情報を簡単に探し出せます。ほかには、旅行や飲食、美容関連など、予約や口コミ掲載、あるいは特定のテーマに特化したコンテンツ重視のポータルサイトなども存在します。ポータルサイトの作り方や種類についての詳しい内容は、以下の記事を参照してください。ポータルサイトとは?意味や種類から失敗しない構築方法まで解説!「もくじ」に戻るWebデザインの最新トレンドポータルサイトなどのWebサイトに、継続的にアクセスしてもらうには、流行している最新のデザインをサイトに取り入れることが必要です。最近のポータルサイトのトレンドとしては、個性的でひと目見たら印象に残るデザインが主流になっています。アイコンなどに陰影をつけてデコボコ感を出し、実際に押すことができるように見せるニューモーフィズムといわれるつくり方が今後、検索バーなどの要素に取り入れられていくといわれています。アイソメトリックという図法を使い、斜め上から見ているような立体感や奥行を感じさせる画を取り入れたデザインも目を引きます。一方で、パソコン以外の端末からから見たときのポータルサイトの印象も大事です。ポータルサイトなどのWebサイトは、スマートフォンやタブレットなどの画面が小さい端末からもアクセスされます。小さな画面で文字だけを追いかけるのは、「文章の切れ目が分かりにくい」「説明が多くなる」「伝えたい情報が不明確になる」など、ユーザーが閲覧自体を負担に感じやすいものです。ユーザーを飽きさせないためにも、文字情報よりも写真や動画などが積極的に利用されています。テキストでは分かりにくい情報が、地図やグラフの挿入、ピクトグラムの使用など、視覚的に訴えることで簡単に理解できるようになります。なかには、写真と商品名のみで装飾がまったくないシンプルなWebサイトも見られます。余計な装飾を省くことで、ユーザーに必要なメッセージがダイレクトに伝わる洗練されたインパクトを与えるサイトになります。システム面においても、スマートフォンやパソコンのダークモードに対応したWebサイトや、より直感的にどこを押せばよいのかが分かるマウスカーソルの変形やサイト案内に役立つツールチップなど、最近のWebデザインは見るユーザーにとって優しい、分かりやすいデザインが好まれています。「もくじ」に戻るポータルサイトのデザインの最新トレンドポータルサイトのデザインは、分かりやすさが非常に重要です。トレンドを考える上で重要なのは、スマートフォンでの表示を意識したデザインであることが挙げられます。前述の2点を踏まえて、トレンドとなっている4つのデザインの型を紹介します。ポータルサイトのテンプレートとして、参考にしてください。カード型デザイン多くのポータルサイトで採用されているデザインといえるカード型は、名前の通りカードのようにコンテンツを並べて紹介するデザインです。ポータルサイトにおいて最も重要な「ユーザーの見やすさ」を意識し、コンテンツを四角形として整然と並べることで、リンクも非常に探しやすいデザインになります。コンテンツが整然と並んでいるため、見た目の印象も整っており、大手企業から中小企業まで取り扱うジャンルを問わず、幅広いポータルサイトに採用されているデザインです。コンテンツを並び替えるだけなので、パソコン上では横並び、スマートフォン上では縦並びというように、閲覧者が使用するデバイスによる全体のデザインの変更にも適しています。人の習性に、「動いているものを追いかけてしまう」というものがあります。この習性を利用して、サイトのトップに動画を配置した目を引くデザインがシネマグラフ型です。伝えたいメッセージが含まれる画像の一部だけを静止画から動画に変えることで、ユーザーの視線が集められるデザインです。静止画と比べると、非常にインパクトが残ります。注意したいのは、トップの一部だけに動画を使用するということです。動画を多用しすぎると、メッセージがぼやけるだけではなく、サイトの読み込みが遅くなるため、ユーザーがサイトから離脱する要因になります。出典:オオサカマニアヒーローヘッダー型デザインサイトを訪れたときに、いきなり全画面で写真やイラストを表示するデザインが、ヒーローヘッダー型です。画面に映るのは画像1枚と少ないテキストというシンプルなデザインですが、見た目のインパクトが大きく、画像によって明確にサイトのコンセプトが伝わりやすいという効果が期待できます。ブランドイメージが大切なゲームや漫画関連のサイトを始め、自治体の公式ポータルサイトで積極的に取り入れられています。シンプルなために誤魔化しがきかず、画像や動画のレベル次第では、サイト全体、ひいてはブランドイメージそのものを損なう可能性があるため、センスの問われるデザインです。垂直型インターフェース・デザインこの章で扱うインターフェースとは、主にユーザーが見る画面のことを指します。スマートフォンの普及により外出先でもWebサイトを閲覧する人は増えており、サイト制作においても、スマートフォンでの閲覧を意識したデザインが重要になっています。代表的なデザインが垂直型インターフェース・デザインです。従来までのパソコンのみを想定したサイトなら、拡大縮小・画面の移動などが自由にできたため、サイトを訪れてすぐのファーストビューが重視されていました。スマートフォンは基本的に縦方向のみのスクロールしかないため、垂直方向へのスクロールを意識したWebデザイン、スクロールビューが重要です。以前であれば動画の採用は画面を重くする要因であるため、デザインでは用いられませんでした。通信技術の発達により、動画を用いても読み込み速度が速くなった結果、小さな画面でも多くの情報を伝えられるように、余計な情報をそぎ落として動画のみに絞るというようなデザインも盛んになっています。SITE「もくじ」に戻るポータルサイトのデザインで重要な4つのポイントポータルサイトのデザインで重要なポイントには、ユーザー視点を意識した以下の4つが挙げられます。1.ターゲットユーザーが好むテイストにするポータルサイトは、一度訪れたら何度も訪れたくなるように、ターゲットユーザーが好むテイストにします。ポータルサイトを利用するターゲットの年齢層や性別など、属性に合わせることでアクセス数や滞在時間が増えるきっかけになります。文字の大きさや書体なども、ユーザーに安心感を与えるようなデザインを意識しましょう。2.情報の充実さ・探しやすさを意識するWebサイトの中でも、とくにポータサイトは、さまざまなコンテンツのリンクが集められた情報サイトであるため、情報の充実さや探しやすさを意識しましょう。情報の充実さでは、一次情報を集めたり、更新頻度を高めたりするなど、「ここにくれば知りたいことが大抵わかる」と思ってもらえるようなつくり方が必要です。探しやすさについては、知りたい情報がどこにあるのかひと目でわかるように、カテゴリーやジャンル別にするなど工夫が必要です。コーポレートサイトなどでは、余白を多めに取ってリッチさや見やすさなどを重視しますが、ポータルサイトの場合はあまり余白を取りすぎてしまうと情報量が少なく見えることもあるので、余白をやや狭く取る傾向にあります。3.色や装飾はシンプルにするポータルサイトで使用する色や装飾は、華美にせずシンプルにすることで、ユーザーは目的の情報が見つけやすくなります。使用する色数は、ベースとアクセントになる3色程度で構成すると効果的です。使用するイラストやアイコンなども、ポータルサイト全体のイメージに合わせると雰囲気が統一されて、情報が豊富にありながらもすっきりした印象を与えます。4.コンテンツを回遊しやすくするポータルサイトにアクセスしてもらった次には、コンテンツ同士を回遊しやすいように構成してデザインすることも大事です。関連記事や人気のある記事へのリンクを充実させることで、他の記事にも興味を持たせることができます。多くの記事に興味を持ってもらうことで、滞在時間が増えて回遊率を上げることができます。ほかには、訪問したユーザーの目に注目させたい記事が見えるように、トップページ以外にもサイドバーからアクセスできるようにします。すると、ユーザーがポータルサイトに訪れるたびに更新されていることが、サイドバーの情報を見ることで、ひと目でわかります。「もくじ」に戻る良かったら参考に!シフト制作のポータルサイトデザイン集この章では、シフトで制作したポータルサイトの概要やデザインのポイントを、事例をもとにデザイナーのコメントを交えて紹介します。良かったら参考にしてください。岡田商事様が運営するRIDEMOTOは、「オートバイを愛するすべてのお客さまのために」をモットーにした、ポータルサイトです。扱い店舗のほか、使い方や新製品などの特集記事などをまとめた、ライダーに向けた専門型サイトになっています。このデザインのポイントサイトを訪れたときの印象として、装飾が少ないことが挙げられます。これによって各ブランドや、製品の写真に注目しやすく、全体としてすっきりとした印象があります。ページ下部のカード型にまとめられたコンテンツもアイコンを活用し、表示する文字を減らすことで、表示されるコンテンツ自体が見やすくなっています。バイクに乗る人がいだくかっこよさを追求したデザインです。株式会社セキグチ様は、ぬいぐるみや人形などを製造販売している会社です。同社の代表であるキャラクター「モンチッチ」のオフィシャルサイトでは、最新のグッズやイベント情報のほか、取扱店舗、オンラインショップを紹介しています。このデザインのポイントイメージカラーであるこげ茶と赤をメインで使うことで、一目でモンチッチのサイトであることが分かります。イラストや手書きフォントを活用することで、キャラクターのかわいらしさを演出しつつも、ポータルサイトとして充実した情報が、整理されています。ライトユーザーからヘビーユーザーまで、歴史あるキャラクターとして、どの世代にも受け入れられるデザインです。SPIRITS様の商品情報ポータルサイトです。紹介のほか、最新情報をSNSで配信していることもあり、メインビジュアル直下にツイートが見られるようにデザインされています。このデザインのポイント最も特徴的なのは、メインビジュアルなどの画像の形が正方形であり、スマートフォンでの閲覧をメインに据えたデザインとなっています。最新情報をSNSで発信・拡散できるように各種SNSのアイコンも大きなものになっています。それ以外のデザインとしても、イメージカラーである青を中心に配色し、様々なキャラクターやロゴの紹介がシンプルにまとめられています。どのサイトでも共通していることは、企業の持っているイメージを伝えられると同時に、実際に訪れたユーザーにとって分かりやすい、ユーザー目線を意識したサイトであることです。そのほかにも、シフトでは数多くのポータルサイトを手掛けていますので、気になる方は以下の実績集をご覧ください。ポータルサイトの実績を見るスマートフォン向けのサイト制作についてはこちらの記事で詳しく説明しています。スマホサイトの作り方。対応すべき大事な理由と2つの対応方法をご紹介。「もくじ」に戻るまとめポータルサイトは玄関口であると同時に、サイトの案内板でもあります。デザインするときに重要なのは、何よりも使い手側への見やすさと使いやすさです。多くのコンテンツを整理し、見つけやすい位置にサムネイルを配置するだけでも、ユーザーの離脱は防げるでしょう。今後のポータルサイトにおいては、使うユーザーの属性だけではなく、使用デバイスまでも意識したデザインが求められます。パソコンなのか、スマートフォンなのか、見え方は異なるので、どちらを意識したサイト作りをするのかもデザインを考える上で不可欠です。11:17#ポータルサイト#ポータル#社内ポータル#事例#機能#メリット会員制サイト構築のすべて。13:07#会員制サイト#会員制サイト#クローズドサイトカテゴリーCMS(42)CMS基礎知識(33)CMS機能紹介(8)Web制作(40)ポータルサイト(5)ECサイト(7)SITEMANAGE(7)セキュリティ(5)BtoBサイト(1)その他(1)会員制サイト(1)コーポレートサイト(2)採用サイト(1)スマホサイト(1)基礎知識(1)コミュニティサイト(1)オウンドメディア(1)製品サイト(1)サポートサイト(1)サービスサイト(1)物件サイト(1)IRサイト(1)多言語サイト(1)編集部おすすめの記事ポータルサイトとは?構築方法や成功事例に学ぶビジネス活用のヒントこの記事は2023年5月1日に更新したものです。「ポータルサイトってよく耳にするけれど、普通のWebサイトとなにが違うのかよくわからない」という方も少なくないと思います。一般的な企業情報を発信するコーポレートサイトとの一番の違いは「集客」が目的になっている点です。社員が使いたい社内ポータルサイトとは?事例で学ぶ成功の秘訣*この記事は2021年8月17日に更新されました。企業内の情報を確認するのに欠かせない存在といえるのが、社内ポータルサイトです。社内に散らばった情報を一元管理し、さらにその管理を容易にする社内ポータルサイトは、非常に便利なツールだといえるでしょう。会社の規模が大きくなるほど、組織・拠点ごとに複数の社内ポータルが用意され、社員はどこに...#ポータルサイト#ポータル#社内ポータル#事例#機能#メリット会員制サイト構築のすべて。会員の方だけがWebサイトにアクセスできたり、一般ユーザーと会員ユーザーで閲覧できるコンテンツを制御したりできるのが会員制サイト。その会員制サイトはクローズドサイトとも呼ばれ、運用する目的によってさまざまな種類があります。種類や形態によって違いはあるものの、会員との関係を強化でき、製品やサービスの追加購入がしやすくなるというメリットは共通します。...#会員制サイト#会員制サイト#クローズドサイト#CMS機能#パッケージCMS#オープンソースCMS#SEO対策#WordPress#セキュリティ#メリット#デメリット#SNS#プラグイン#CMSとは#EC#Eコマース#事例#情報漏えい#ポータル#脆弱性#マーケティングオートメーション#社内ポータル#クラウドCMS#サイトリニューアル#機能#データ移行#デザイン#ハッキング#フォーム#システム#管理画面#メール#分析#オウンドメディア#ブログ#MA#サーバ#スクラッチ開発#HTML#Googleアナリティクス#API#ハッカー#Pマーク#個人情報#テスト1#BtoBサイト#会員制サイト#クローズドサイトお問い合わせ資料ダウンロードご不明点やご相談がございましたらお気軽にご連絡ください些細なお悩みや質問などございましたら、どんな小さなことでもお気軽にお問い合わせください。全ての文章・画像の転載をお断りします。