【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ2015-11-02【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめWEBデザイン今回のWEBデザイン10選では、雑誌やカタログなど紙媒体のデザインエッセンスをうまく取り入れた、マガジン風レイアウトのWEBサイトをピックアップしてみました。WEBデザインに比べて、はるかに歴史の長い紙媒体のデザイン。ここ数年はWEBへとシフトしていくメディアも多く、廃刊になってしまう雑誌なども多くありますが、それでもまだまだ紙媒体から学べることは多くあります。ページを眺めていて、「こんな感じで、うちのホームページもつくってみたいな」と思うことはあるのではないでしょうか?そんな時の参考になるサイトを、ピックアップしてみます!雑誌媒体と連動したWEBサイトマガジン風レイアウトのエキスを知るために、まずは雑誌媒体と連動したWEBサイトを見てみましょう。」のWEBサイトです。グリットデザインで大中小のサムネイル画像が美しく並び、見出しや本文の文字組にもメリハリがあって、見やすいサイトになっています。雑誌と連動しているコンテンツが多いため、写真やサムネイル画像のクオリティはさすが。そこに、WEBの利点を活かした動画コンテンツなども加えられており、雑誌とWEBのクロスメディアの好例とも言えるサイトです。magazine」のWEB版レイアウトのポイント:タイル状レイアウトクリエイターのインタビューやイベント情報などを掲載している、世界のクリエイティブジャーナル誌「QUOTATION」のWEBマガジンです。タブロイド紙を思わせるようなデザインテイストが基本。トップページは丸と四角で動きを出したタイル状にレイアウトされており、ページをスクロールすると、過去の記事をどんどん読み込んで、さかのぼれるようになっています。各記事の個別ページも雑誌風にレイアウトされ、写真を活かしながらシンプルで読みやすくまとめられています。雑誌媒体のエキスを取り入れたWEBサイト雑誌媒体と連動したWEBサイトは、やはり素材の豊富さが強みのようです。ここからはマガジン風のエッセンスや雑誌やカタログなどに見られるレイアウトパターンを取り入れた、一般のWEBサイトを紹介していきます。MAGhttp://www.shipsmag.jp/業種:アパレルサイトの目的:ライフスタイル提案サイトレイアウトのポイント:グリッドレイアウト衣類や小物などを販売するセレクトショップSHIPSの情報サイトです。MAG」のタイトル通り、WEBマガジンとして豊富なコンテンツを掲載。着こなしやコーディネートだけでなく、ライフスタイルを提案することで販促につなげていくという作りのサイトになっています。情報量の多いサイトながらシンプルで見やすく、上部のナビゲーションにマウスを合わせた時の反応なども使いやすく設計。サムネイル画像のクオリティが高く、わかりやすくカテゴライズされているので、いろいろな記事を読みたくなります。各コンテンツの個別ページも、記事内容に合わせて雑誌風にレイアウト。サイト全体が美しくレスポンシブする作りになっているところにも注目です。WebNAUThttp://webnaut.jp/業種:クリエイティブサイトの目的:クリエイティブ情報サイトレイアウトのポイント:タイル状レイアウト株式会社ビーワークスの運営する研究紹介サイト。クリエイティブに関する様々なお役立ち情報を通して、自社のこだわりや制作プロセスを紹介しています。記事のカテゴリーごとにサムネイル画像の形がちがうというユニークなデザインで、タイル状レイアウトの整然とした印象の中に動きを出しています。このサイトもレスポンシブWEBデザインになっており、その動きやナビゲーションデザインの面でも参考になります。BOOK246http://book246.com/業種:書店サイトの目的:書店「BOOK246」のWebサイトレイアウトのポイント:グリッドレイアウト「旅」をテーマにセレクトした様々なジャンルの本や雑貨が並ぶ旅の本屋「BOOK246」のWEBサイトです。こちらのサイトもタブロイド紙のようなイメージになっており、背景に紙のテクスチャーを敷いて、それをより強調させています。グローバルナビゲーションなどで使われている英文のセリフ体フォント(書体)がデザインのアクセントになっており、タブロイド風のイメージを持たせるのに一役買っています。残念ながら、書店の閉店にともなってサイトは現在更新されていませんが、参考になるデザインのひとつとしてピックアップしました。ニチユー株式会社http://www.nichiyu.net/業種:玩具貿易サイトの目的:コーポレートサイトレイアウトのポイント:グリッドレイアウトトランプ・タロットなど大人向けの嗜好品の輸入販売を行うニチユーのコーポレートサイトです。このサイトもタブロイド紙のような雰囲気でデザインされ、背景には新聞紙のようなテクスチャーが敷かれています。コンテンツに合わせた装飾をタイトルまわりにデザインをしているのも紙媒体風。COMPANYページではアナログテイストの飾り罫やかすれたラインを使うなど、細かいディテールまで作りこまれているサイトです。鞆物語(TOMOMONOGATARI)http://tomomonogatari.com/業種:観光サイトの目的:地域のPR/観光促進サイトレイアウトのポイント:グリッドレイアウト広島県福山市にある港町「鞆の浦(とものうら)」の地域情報サイトです。鞆物語というタイトルからもわかるように、鞆の浦の魅力を様々な物語として紹介するという企画で、サイトが構成されています。その象徴でもある「鞆の浦でみつけた素敵な物語り」のコンテンツは、地元の人々へのインタビュー記事をまとめたもの。写真と文章を見ながら読み進められるWEBマガジン的な作りになっており、雑誌風デザインのエッセンスとWEB媒体ならではの良さがうまくミックスされています。地方をアピールするサイト作りの参考にもなりそうなサイトです。山本海産物http://shop.yamamoto-kaisanbutsu.jp/業種:食品サイトの目的:ECサイトレイアウトのポイント:グリッドレイアウト長崎県五島列島にある山本海産物のECサイトです。美味しそうな食べ物の写真が多く、クリックして買いたくなってしまいます。見出しは縦組み、本文は横組みと、文字組が使い分けられていますが、これは、見出しに目がいくように雑誌などでよく用いられる手法。商品の個別ページでもこのようなレイアウトが使われており、カタログ風の印象の見やすいデザインに仕上がっています。MAGAZINEhttp://www.gosho-screw.jp/業種:工業部品サイトの目的:コーポレートサイトレイアウトのポイント:目次ページ風レイアウト大阪にある江商螺子株式会社のコーポレートサイトです。トップページが雑誌のインデックス(目次)ページのようなレイアウトになっており、どのようなコンテンツがあるサイトなのかが、ひと目でわかる作りになっています。各個別ページのナビゲーションも、これと同イメージのインデックス風にまとめられています。このようなデザインにするために、トップページのコンテンツタイトルや各階層のナビゲーション部分には、統一したゴシックフォントが使用され、ブラウザなどの閲覧環境の影響で書体が置き換わって表示されないように、あえて画像で作成されています。通販のベルメゾンネットhttp://www.bellemaison.jp/cpg/trends/boots/boots.html?DM4_KBN=kis_151007_21業種:通信販売サイトの目的:ECサイトレイアウトのポイント:ランディングページ型レイアウト通信販売のベルメゾンネットの「ブーツコレクション」の特集ページです。文字部分も含めて、ページの基本的なデザインが画像主体で作られているので、コーディングの制約に依存せず、カタログのような自由なデザインが行われています。カタログを多数制作しているという通販会社ならではの特殊性はありますが、このように画像中心にすることでデザインの幅を拡げるというやり方は、より雑誌やカタログ的なレイアウトにしたい時のひとつの手法として参考になります。今回のまとめ以上、今回はマガジン風レイアウトのデザインを見てきましたが、いかがだったでしょうか?雑誌や新聞のデザインも、基本的な作りはグリッドレイアウトのものが多いので、WEBデザインの参考になる点は意外と多くあります。紙媒体風のデザインでは、文字組がイメージに大きく影響するので、つくりたいサイトのイメージを制作会社に伝える時には、参考サイトのアドレスを伝えるだけでなく、雑誌などを見せるのも良いかもしれませんね。WEBフォントも普及し、WEBサイトでの文字表現も自由度が上がってきています。グリッドレイアウトやタイルレイアウトは、増加しつつあるレスポンシブWEBデザインとも相性が良いので、今は、あらためて紙媒体のデザインから学ぶべきいいタイミングかもしれません。<関連記事>これは上手い!縦の文字組みを効果的に使ったサイトまとめ【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめこの記事に関連する記事2015-11-20今どきの幼稚園・保育園ホームページ研究。エムハンドその他アクセスランキング月間1今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?2いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ3【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ4今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ5言葉に悩むあなたに。文章作成を助けてくれる便利ツール9選6【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選7【WEBデザイン10選】ナチュラルさが上手く表現されたWEBサイトまとめ8わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!9【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ10【WEBデザイン10選】これは上手い!縦の文字組みを効果的に使ったサイトまとめ総合1いまさら聞けない!フリック、スワイプ...スマホ操作の基本用語まとめ2今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?3【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選4【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ5【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ6【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ7初めてでもできる!iPhone動画編集アプリ【厳選4つ】8【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ9【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ10【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ最新記事Web集客に必須の「ペルソナマーケティング」。ある相談事例エムハンドブログwebマーケティングインバウンドブログweb雑学・面白ヒルメシマエブログ。