福岡のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

ホームページ制作の参考にしたい!日本語独特の縦書きデザインのWebサイトまとめ

| カテゴリー : Webデザイン

こんにちは!福岡のホームページ制作、アイドットデザインの山下です。

今回は素敵な縦書きデザインのWebサイトをまとめてみました!全部で10サイトになります。

それではどうぞ!

石川はちみつ牛 有限会社鈴木畜産

http://hachimitsugyu.com/

福島県石川町で育てられるブランド牛「いしかわ牛」のウェブサイトです。

必要最低限のナビゲーション、ページ構成がとても素敵です。

スッキリと見やすいシンプルなデザインがよりいしかわ牛の良さを引き出しているように見えます。

株式会社TAICHIRO

http://taichiro.co.jp/

国産天然木・無垢材を生かした一枚板のダイニングテーブル、座卓などを販売する会社のウェブサイトです。

とにかく木に対する愛情が文字を通して伝わってきます。
レイアウトも素敵ですが、ひとつひとつの言葉が心に残り、木の人生を見ているような気分が味わえます。

guntû(ガンツウ)

http://guntu.jp/

瀬戸内海に浮かぶちいさな宿guntûのウェブサイトです。

シンプルな構成ですが、ハイクオリティな写真がバシッと決まったクールなサイトになっています。

外国人観光客向けに英語版もありますが、英語版と日本語版で印象が違って見えるのも縦書きならではの良さだと思います。

西尾維新オフィシャルウェブサイト

http://ni.siois.in/

小説家、漫画原作者、脚本家の西尾維新さんのオフィシャルウェブサイトです。

トップの断片小説にマウスカーソルをあてると……、面白いですね!
文字背景が原稿用紙になっているところなど遊び心のあるサイトは勉強になります。

西尾維新さんの独特の言葉遊びが大好きです。「そうかもしれない」と頷いてしまうほどの強いメッセージ性がありますよね。

奥沢 ますぶち

http://okusawamasubuchi.com/

世田谷区奥沢にある料理屋ますぶちのウェブサイトです。

日本料理の雰囲気がサイト全体から伝わってきます。和のテイストを強調しつつ、繊細にまとめられていて参考になります。

アップルファームさみず

http://www.applefarm-samizu.com/

アップルファームさみずのウェブサイトです。

マウスホバーしたときにりんごの「赤」を上手く使ってアクセントになっています。

しっかり見せたいところに効果的に縦組みが使われているので全体的にわかりやすく整理されています。

日山特撰和牛肉 特設サイト

http://hiyama-gr.com/kouri/tokusen/

日山特撰和牛肉の特設ウェブサイトです。

何かを秘めた印象や影のある印象を与える黒色を上手く使っています。肉のイラストがより引き立って黒背景との相性が良いですね。

コンテンツもシンプルですが力強い内容で、確立した肉の魅力を感じさせます。

四字熟語

https://yoji-jukugo.com/

「四字熟語」のウェブサイトです。

ミニマリズムを追求したシンプルなデザインが素敵です。

要所で無限スクロールが使用されていますが、縦書きとの相性が良いですね。

満つ美

http://www.gallerymitsumi.jp/

京都市中京区寺町美術街で日本の書画や掛け軸などの古美術を主に扱う満つ美のウェブサイトです。

右上のナビゲーションを縦書きの明朝体とセリフ体の欧文でおしゃれに表現しています。

本文のレイアウトは横書きと縦書きを上手く組み合わて構成されています。

熱海 大観荘

https://www.atami-taikanso.com/

静岡県熱海市にある高級旅館、熱海大観荘のウェブサイトです。

歴史を感じつつ、洗練された空間を感じます。

高級感のある温泉宿の印象を縦書きと写真を中心に見せるレイアウトと黒とゴールドの配色で表現しています。

まとめ

縦書きデザインのサイトをずらっと並べてみました。いかがでしたか?

今回まとめを作るなかで、感じたことを最後にまとめておきます。

使い方次第で表現が変わる

  • 和風や歴史を表現したり、縦書きの小説風に見せたいときに使用すると効果的です。
  • ピンポイントの縦組みを使用するとモダンな印象を与えたり、ナチュラルなイメージを感じさせたりすることもできます。

レスポンシブやブラウザサイズを考慮してデザイン

  • 文章量が増えると下に展開していく横書きと違い、縦書きは左右に広がっていくので、ブラウザサイズを考慮しながら文章量や折り返し位置を計算してデザインをしていく必要がある。
  • デバイスごとの可読性を考慮し、デスクトップでアクセスした際には縦書き、スマートフォンでは横書きで見せるなど変化を持たせることができる。

横書きと違い、右から左に読ませる縦書きはwebデザインのレイアウトに変化をもたらしています。

以上、長くなりましたが縦書きデザインのホームページを制作する際に参考にしていただければと思います。

また気になったサイトのまとめをお届けしたいと思います。それでは、また次回!

福岡市の中小企業向けホームページ制作・リニューアルならアイドットデザイン。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。