縦書き文字を取り入れた、スタイリッシュなWebデザイン12選

さまざまな技術やアイデアがWebデザインに取り入れられるいま、平凡なデザインではユーザーの目にとまりません。ユーザーはユニークかつクリエイティブなデザインを求めています。

こうした欲求を満たすのは、アニメーションや大掛かりな仕掛けだけではありません。とても小さな工夫が、大きな違いをうむこともあります。そうした工夫のひとつが「文字を縦に配置したデザイン」です。

今回は文字を縦にした、斬新でスタイリッシュな縦書きWebデザイン10選をご紹介します。

1. Archi Graphi

左側のナビゲーションバーが縦になっているのがお分かりでしょうか。横書きの文字を90度回転させています。

このようにナビゲーションバーを配置することで、ヘッダーが広々として見え、サイトロゴが目立つという利点も。意匠が凝らされたデザインです。

Archi Graphi

2. Lydia Amaruch

こちらもArchi Graphiと同じく考え抜かれた縦書きデザインです。縦にした文字をアクセントとして使っています。

文字との調和を考えて、背景に縦線を配置しているところもポイントです。

Lydia Amarunch

3. Yo:Ha

Yo:Haもアクセントとして文字を縦にしています。縦になっているのは、ソーシャルメディアのリンクとホームボタンです。

画面を縦に区切ったり、縦線を配置することによってデザインの一貫性を保っています。

Yo:Ha

4. Ivan Ibanez

カタカナの「デザイン」が印象的なこちらのWebページは、個人のポートフォリオサイトです。

レイアウトを分割して余白を確保しており、全体的にセクシーな雰囲気です。文字を縦にしたナビゲーションによって、デザイン全体が美しく仕上がっています。

Ivan Ibanez

5. Gothamsiti

四隅に縦書きの文字リンクが配置されています。

このような配置は個性的なだけでなく、ヒーローエリアに注目を集めるのにぴったりです。

Gothamsiti

6. Prime Park Sessions

ナビゲーション以外が縦になっている例も見てみましょう。Prime Park SessionsのWebサイトのように、社名やキャッチフレーズなど、注目を集めたい内容を縦にするのもおすすめです。

縦にした文字で面白いのは、「下から上」に読むケースもあれば、その逆もあるというところ。こちらは「上から下」に読むデザインです。右端のナビゲーションも縦に揃えることで、Webデザインの調和を保っています。

Prime Park Sessions

7. Luxury Villas

画面左にキャッチフレーズを縦書き配置し、幅広のサイドバーのように見せています。

キャッチフレーズの上にはハンバーガーメニューが。ユニークで魅力的なデザインです。

8. Kitamura Makura

日本のWebサイトにも、縦書きデザインが取り入れられることはよくあります。

見出しがナビゲーションの一部として、画面右側に縦書き配置されています。

Kitamura Makura

9. Canatal

Kitamura Makuraと同様、おもに見出しが縦配置になっています。

こちらはブロックの一部として配置されているのが特徴です。

Canatal

10. Protec

ここまでにご紹介した例はいずれも文字が小さめでしたが、こちらはデザインの一部として大きな文字を縦配置しています。

文字の存在感は保ちつつ、コンテンツが優先されるようなデザインですね。

Protec

11. Building the Future

本記事でご紹介する中で、一番文字が大きいのがこのデザイン。

縦にアルファベットを並べる、比較的珍しいデザインですね。

Building the Future

12. Kwok Yin Mak

西洋の言語には縦書きはありませんが、中国語や日本語は本来縦書きです。

こちらは縦書きの文字を使った中国語のWebサイト。モノクロで余白が大きく、シンプルでスッキリした印象です。縦書きの文字がアクセントになっていますね。

おわりに

Webデザインにおいて、縦に配置した文字はマイノリティです。しかしだからこそ、ユーザーに新鮮な驚きを与えられる可能性を秘めています。

ちなみにWorkship MAGAZINEでも、文字を縦に配置したデザインを採用しています！

▲画面右の「NEW ARTICLES」が縦書き

縦書き文字でデザインにアクセントを加え、斬新なWebサイトを作ってみてください。

（原文：Nataly Birch　翻訳：Asuka Nakajima）

あわせて読みたい！▼