Webサイトにおける1つの小さなボタンが、サイトを訪れる人の行動や経験を大きく左右することがあります。
最新のトレンドを取り入れたボタンデザインは、時に訪問者を引きつけ、サイト内の行動を促進する重要なツールです。
この記事では、2023年のボタンデザイントレンド21選をカテゴライズしてピックアップして紹介していきます。
黄緑のサイトカラーを利用したアプリ等でも使われるベーシックな形のボタンに、小さい矢印の組み合わせ
エメラルドグリーンのサイトカラーを利用したサービスを彷彿させる長方形。
角丸長方形のシンプルな白色ボタンにシャドウがかかっている。円で囲まれた矢印で目立ちやすい。
ダークカラーの角丸長方形のボタンに白色の文字、アクセントとなる白丸がついている。
長方形の右端だけ丸にデザインされた枠線のボタンとがシンプルさの中に遊び心を感じさせる。
２色カラーで立体的に見せる角丸長方形の美しいボタンデザイン。
ベタ塗り背景や枠線などがない、ボタンと矢印が一体型にデザインされている。
傾斜のある切れ目が入った鍵括弧を連想させる枠線のボタンと斜めに配置されたテキストが、シンプルながらも存在感あり。
サイトのアクセントカラーである白色の正円の枠線に、小さな英字のテキスト。
オレンジ色のサイトカラーを利用した長方八角形のボタンとアクセントとなる四角星。
背景色と同じピンク色の長方形に白色の枠線で囲まれたボタンとテキスト。
ショップ、サイトに合わせたグレー×サーモンピンクの2色のカラーを利用した長方形ボタンと大き目矢印が目立ちます。
背景は斜線で表現された枠線がかわいい長方形ボタンとシンプルな矢印の組み合わせ。
シンプルな枠線の長方形ボタンと枠線で囲んだ矢印がさりげなくカッコイイ。
グラデーションになった枠線の長方形ボタンは左上・右下に黒色アクセントで目立たせ、全体にシャドーがかかっている。
サイトデザインに合わせたチョコレート色のイラストアイコンとテキスト。
黄色のサイトカラーをアクセントにした丸のあしらいを背景にテキストと矢印。
角丸長方形のボタンにSNSアイコンとインパクトのあるアーモンド写真の組み合わせがかわいい。
上下の２本の線で挟まれたボタンにテキストと赤の大きく目立つ矢印が目を引く。
ショッキングピンクのサイトカラーを利用した角丸長方形のボタンにテキスト、ユニークな吹き出しアイコンが目立つ。
手書きテキストと手書き矢印が一体型にデザインされたクラフト感のあるデザイン。
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
