【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
かつてナビゲーションメニューは、画面の上部や左右に固定されていました。しかしモバイル端末が進化した現代は、ハンバーガーメニューとスライド式サイドバーが主流の時代です。
もちろんハンバーガーメニューやスライド式サイドバーは、モバイル端末専用の存在ではありません。PCの画面においても、メニューを隠しておくことでより広くスペースを活用できます。
今回は2019年最新の、モダンなデザインのスライド式サイドバーを9つご紹介します。ユニークなアイデアに基づいたサイドバーを、ぜひ参考にしてみてください。
目次
Azouaoui Mohamedによるサイドバーテンプレートは、ロゴタイプからソーシャルメディアアイコン、検索ボックスまで、必要なものをすべて備えています。
モバイルにもデスクトップにも合うフレキシブルなデザインが魅力。強力なワークフレームであるBootstrap4をベースにしています。
シンプルなサイドバーがお好みなら、Jelena Jovanovicの作品がおすすめ。幅広い用途に対応できる、エレガントでシンプルなデザインです。左側からスムーズにスライドするサイドバーには、ナビゲーションやロゴなどの重要な情報だけが含まれています。
さらに注目したいのは、このサイドバーがCSSのみで作られているところ。JavaScriptを使わずにサイドバーを作りたいなら、ぜひ参考にしたい作品です。
Pure CSS SlidebarとおなじくCSSのみで作られていますが、この作品にはFlexboxが使われています。
ニュートラルなデザインで、さまざまなメニューが追加できるため、幅広い用途に使えます。
今回ご紹介するなかでも、とくに幅が狭いのがこちらのサイドバー。工夫をこらして、省スペースしつつ必要なものはすべてカバーしています。
ARIAをサポートしているところもポイント。画面サイズによってサイドバーの仕様が変化するところにも、こだわりが見られます。
いままさに人気が高まっている、現代的なデザインのサイドバー。
こちらのサイドバーは画面全体を使っています。美しいデザインと滑らかな動きが特徴です。
「サイドバーは左側にあるもの」と思われがちですが、作者のAntonija Šimicは右側にスライドバーを配置しています。
レスポンシブ対応しており、ミニマルで控えめなデザインも魅力的です。
スライド方法がとくにユニークなのが、Devilish Alchemistによるこのサイドバー。
左上のハンバーガーメニューを中心に、回転するような動作でサイドバーがあらわれます。訪問者を楽しませたいなら、ぜひおすすめしたいデザインです。
さきほどの例と負けず劣らず、とてもユニークなデザインのサイドバー。
ぷるんとした弾力のある動きが特徴です。ぜひ白い部分を左にひっぱって、独特の動きを体験してみてください。
最後にご紹介するのは、Mari Johannessenによる非常にシンプルなサイドバー。既製のデザインではなく、土台を探しているのであれば、こちらがおすすめです。
メニューなどの要素は含まれていませんが、だからこそカスタマイズの可能性は無限大です。
私たちは10年ほど前から、モバイル端末でコンテンツをどのように表示するべきかを模索しつづけ、やっとその方法にたどり着きました。
スライド式のサイドバーはハンバーガーメニューとおなじく、いまやWebデザインには欠かせない存在となっています。今回ご紹介したバラエティ豊かな例を参考に、ぜひユニークなサイドバーを作ってみてください。
(原文:Nataly Birch 翻訳:Nakajima Asuka)
こちらもおすすめ!▼
モバイルアプリのメニューデザインをマスターしよう!事例18選
Workship MAGAZINE
ナビゲーションメニューのデザイントレンドは?良いUXを生み出す5つのポイント
Workship MAGAZINE