ホームページ制作からSEOやリスティング広告などWEBマーケティング全て対応

インバウンドサイトを作るときに知っておきたいこと

戦略的WEBサイト制作が得意なエムハンドとは!?
  • 何をしている会社?
  • 何を作っているの?

【WEBデザイン10選】これは上手い!縦の文字組みを効果的に使ったサイトまとめ

  • WEBデザイン

WEBサイトの多くは、上から下にスクロールしながら、ページを見ていくかたちで構成されています。そのため、文字組も新聞や文庫本などのような縦組みではなく、左から右への横組みで作られているサイトがほとんどです。

しかし、元々の日本語の文字組は縦組みベース。和風のサイトをデザインする際などに、縦組みを効果的に使ってみたい、と思うことはあると思います。また、雑誌のようなデザインにしたり、他とは違う個性的なデザインにしたりするために、縦組みがポイント的に使われる場合もあります。今回は、縦の文字組みを上手く使った、デザインの参考になるサイトをご紹介したいと思います。

縦スクロールを活用!文字のほとんどを縦組みにしているサイト

まずは、縦組みを基本にしてサイト全体の文字組を行い、ポイントとして少し横組みも使用しているようなサイトをとりあげてみます。横組みがほとんどのWEBデザインの中で、記憶に残るサイトが多くあります。

奥沢 ますぶち

0907_01
http://okusawamasubuchi.com/

業種:飲食
縦組みの狙い:和のテイストの強調

世田谷区奥沢にある小料理屋のWEBサイト。サイト全体から日本料理の雰囲気が伝わってきます。和のテイストを表現するために、お店のロゴ、ナビゲーション、本文などほとんどが縦組みで構成されています。縦組み部分の文字はテキストではなく画像で作られていますが、閲覧者がコピーすることもあると思われるお店情の報部分はテキストで横組みされており、ユーザビリティもよく考えられたサイトになっているところも参考になります。

musubime

0907_02
http://www.musubime.jp/

業種:クリエイティブ
縦組みの狙い:会社名から連想する和風テイスト

デザイン会社のWEBサイトです。この会社は、「musubime」という社名や、水引の「叶結び」をモチーフにしたシンボルマークなど、日本古来の和の文化によって、「想いを叶えるデザインをする」という会社のコンセプトを伝えています。サイトデザインも、それと統一したイメージにするため、縦の文字組みが使われています。philosophyやprofileの画像化された文章ブロックが、写真と縦横比を合わせることによって、すっきりとまとめられており、シンプルで美しい1カラムデザインのサイトに仕上がっています。

インド手刺繍の店 タンカ

0907_03
http://www.tanka.in/

業種:クリエイティブ
縦組みの狙い:スクロールの流れに沿って読みやすくする

長い縦スクロールで、道をどんどんと歩いて行くような気分が味わえる、インド刺繍のお店のサイトです。進むにつれてパララックスで画像が表示されていく、楽しさのあるデザイン。しかも、上から下への流れと文字組の縦方向の流れがマッチしているので、文章がとても読みやすく感じます。その結果、ひとつひとつの言葉が心に残り、フェアトレードらしい優しさも伝わってきます。

タイトル・見出しなどに縦組みをポイント使いしたサイト

讃岐うどんのはなまるうどん

0907_04
http://www.hanamaruudon.com/

業種:飲食
縦組みの狙い:和のテイストと動きのあるデザイン

うどんという日本食の雰囲気には、やはり縦組みがぴったり!ナビゲーションの他、メインビジュアルや、コンテンツの見出しなどにも部分的に縦組みが使われています。情報量の多いサイトですが、縦組みの見出しと横組みの本文という構成にすることで、わかりやすく整理され、しかも全体に動きを感じさせるデザインに仕上がっています。下位の各情報ページも、縦組みの見出しを見ただけでメッセージのポイントが十分に分かるよう、上手な編集がなされています。

菓子処 さかした

0907_06
http://wagasi-sakasita.jp/

業種:飲食
縦組みの狙い:商品に合わせた和のイメージの表現

福岡市にある製菓店のWEBサイト。和菓子の商品写真のクオリティが非常に高く、トップページのメインビジュアルのスライドと縦組みのお店のロゴの組み合わせが美しいサイトです。余白が多く取られた、スッキリとしたデザインにしていることで、縦組みと横組みが混在していても見やすいページになっています。商品カテゴリの名前やリード文など、しっかり見せたいところに効果的に縦組みが使われています。

灸PLUS

0907_07
http://kyu-plus.jp/

業種:医療
縦組みの狙い:伝統的医療のテイストと繊細さを合わせたデザイン

札幌市にあるお灸・はり治療室のWEBサイトです。中国を中心にした東アジアの伝統的医療のテイストを表現するために、縦組みの文字が使われています。このサイトも余白が多く、スッキリとしたデザインになっているので、ピンポイントで使われている縦組みが、とてもよく効いています。妊産婦や子どもを対象にした施術も打ち出されていますが、サイトからもそれにふさわしい優しい雰囲気が感じられ、女性にも受け入れられやすいデザインになっています。

かぐれ

0907_05
http://www.kagure.jp/

業種:ファッション
縦組みの狙い:エディトリアルデザインのような見せ方

日本初グリーンファッション発信のショップということで、自然を感じさせる優しいトーンのサイトになっています。コーナーごとのコンテンツ内容に合わせて、縦組み・横組みが混在。コンセプトページでは、便せんにメッセージが書かれた手紙のようなデザイン、「読みもの」のコーナーは雑誌のような編集構成がなされているなど、エディトリアルデザインで使われる手法が、WEB上で上手く表現されています。

ナビゲーションだけに縦組みを使ったサイト

基本的には横組みで構成されていますが、ナビゲーション部分だけを縦組みにすることによって、効果的なデザインに活かしているサイトです。

フラワーショップいで

0907_08
http://www.fs-ide.net/

業種:花店
縦組みの狙い:トップページのデザインにインパクトを持たせる

長崎市にあるフラワーショップのサイトです。縦のビジュアルと文字を使ったシンプルなナビゲーションメニューが、そのままメインビジュアルの役目も果たしており、機能的でありながら印象に残るトップページになっています。ホワイトスペースを活かしたデザインが、花を美しく引き立てています。

カネヰ醤油株式会社

0907_09
http://kanei-shoyu.com/

業種:食料品
縦組みのポイント:伝統と自然の表現

明治維新から受け継がれているという醤油メーカーのサイトです。トップページ上部でスライドする写真を、すぐ下に配置した縦組みのメニューと組み合わせることで、「歴史と自然」というこの会社の特徴をより印象的に伝えることに成功しています。メインのナビゲーションだけを縦組みにしているので、どのページでもよく目立ち、機能面でも効果的。たった1つのパーツを縦組みにするだけでも、全体の印象を大きく変えることができる…ということがよく理解できるサイトです。

池亀酒造

0907_10
http://ikekame.com/

業種:食料品
縦組みの狙い:和のイメージ

福岡にある酒造会社のサイトです。横組みのテキストをベースにしながらもヘッダーのナビゲーションで縦組みが使われており、それだけで日本の伝統が感じられます。また、この会社では、酒蔵スペースレンタルや、ユニークな発想の商品開発など、新しい取り組みも行われています。ただ伝統的というだけでなく、色使いや写真などで同時にそんな新しさも感じさせるデザインになっているというところでも、完成度の高いサイトだと思います。

今回のまとめ

全体的に縦組みが使われたものから、ナビゲーションのみ縦組みになっているものまで。様々なデザインがありましたが、どのサイトでも縦組みが効果的に使われていますね。一般には、WEBには不向きとされる縦組みですが、使い方次第。単に和風のイメージや日本っぽさを表現するだけでなく、ピンポイントの縦組みの使用はモダンな印象を与えたり、ナチュラルなイメージを感じさせたりすることもできます。次のサイト制作やリニューアルでは、ぜひ検討してみてください。

<関連記事>
【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ
【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ
【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  5. 5

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  6. 6

    今“ジモト”がアツイ!情報発信力バツグンなローカルWEBメディアまとめ

  7. 7

    わずか60秒でカンタン制作?!無料アンケートフォーム作成サービス、おすすめベスト5!

  8. 8

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    歯科クリニックのホームページを徹底調査!24サイトに見る集患力のポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  6. 6

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  7. 7

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  10. 10

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

PDFで出力できる!無料自動お見積り

選択するだけで簡単にお見積り可能です。

さらに詳しく話を聞いてみたい方はこちらよりご連絡ください:0120-931-572

ご相談・お問い合わせ

簡単なお見積りが発行できます

ワンクリックに命がけのホームページ制作会社M-HAND