ボタンデザインが魅力的なStudioのWebサイト事例7サイト

Studioの独自審査やカリキュラムを通過したWeb制作会社・フリーランスが加盟できるプログラム「Studio Experts」の制作実績の中から、ボタンデザインが魅力的なWebサイト事例7サイトを紹介します。

サイトの世界観を反映したオリジナリティ溢れるボタンが実装されていますので、アイデアの参考にしてください。Studioを活用したボタンの実装手順を知りたい方は以下の記事もあわせてご参照ください。

＞ボタンの実装をマスターしよう！ボタンリンクの基本〜応用デザインの設定方法を解説 

ボタンが魅力的なWebデザイン事例7サイト

あやセンター ぐるぐる

▲あやセンター ぐるぐる

東京都足立区のコミュニティ施設「あやセンター ぐるぐる」の公式サイトです。冒険と創造を軸にフリーランスで活動する、SEIYA OTSUKAが制作を担当。

ヒト・モノ・コトの循環を表現した「ぐるぐる」のイラストをボタンのデザインにも使用し、施設のコンセプトを効果的に伝えています。様々な色の「ぐるぐる」が自動で切り替わったり、カーソルを乗せたときに「ぐるぐる」が回転したりと、見る人を飽きさせないボタンデザインが特徴です。

＞SEIYA OTSUKAが作ったStudioのWebサイト制作実績一覧

一般社団法人ネコリパブリック

▲一般社団法人ネコリパブリック

猫の殺処分ゼロを目指して保護活動や譲渡活動を行う「一般社団法人ネコリパブリック」の公式サイトです。デザインによってサービスや商品の「らしさ」を引き出す、株式会社スピッカートが制作を担当。

ポップで可愛らしいデザインのサイトに、カラフルなボタンが配置されています。画面右下の「寄付のお願い」ボタンには、猫が首を傾げるアニメーションが実装されており、思わずクリックしたくなります。「トピックス」のセクションに設置された、猫が部屋に入るような扉型のボタンにも注目です。

＞株式会社スピッカートが作ったStudioのWebサイト制作実績一覧

先輩ボイス

▲先輩ボイス

株式会社ワンキャリアが運営する「先輩ボイス」は、就活を始める学生のために先輩たちの就活動向を公開したサイトです。「キャリアの地図」シリーズをはじめ、同社のサイトを数多く手がけるcaroa inc.が制作を担当。

ボタンに吹き出しのデザインを使用することで、先輩たちと実際に会話をしているような雰囲気を演出しています。また、画面右下の「ONE CAREERに登録して就活をはじめる」は、新規会員登録に繋がる重要なボタンのため、オレンジの吹き出しで注目を集めるよう工夫されています。

＞caroa inc.が作ったStudioのWebサイト制作実績一覧

ビズビレッジ

▲ビズビレッジ

愛知県の三河八橋駅前にある「ビズビレッジ」は、コワーキングスペースと自習室を融合した施設です。公式サイトは、同じく愛知県を拠点とする株式会社WOSH designが制作を担当。

白と黒を基調としたサイトの中に、鮮やかな蛍光イエローのボタンが配置されています。スマホを操作する人の可愛いアニメーションをボタンに取り入れることで、サイトを訪れるユーザーの視線を自然に引きつける効果もあります。

＞株式会社WOSH designが作ったStudioのWebサイト制作実績一覧

森の企画室

▲森の企画室

自然や社会に関するデザインを手がけるクリエイティブチーム「森の企画室」の公式サイトです。「デザインでお答えすること」をミッションに掲げる、株式会社アールイーデザインが制作を担当。

サイト全体の雰囲気に調和するシンプルなボタンに、手書き風の矢印アイコンを組み合わせることで、柔らかな印象を与えています。ボタンにカーソルを乗せると矢印アイコンが切り替わるアニメーションにも注目です。

＞株式会社アールイーデザインが作ったStudioのWebサイト制作実績一覧

モノコトLab.

▲モノコトLab.

TKエンジニアリング株式会社が運営する、小中学生向けのモノづくりスクール「モノコトLab.」の公式サイトです。ワクワクを追求するクリエイティブ・エージェンシー、ZIZOが制作を担当。

ボタンに黒い影をつけることで、立体感を表現しています。カーソルを乗せると影が消え、まるで本物のボタンを押しているかのような感覚を楽しめます。ポップなイラストやアニメーションをふんだんに活用しつつも、ボタンの存在感が際立つサイトです。

＞ZIZOが作ったStudioのWebサイト制作実績一覧

株式会社ロケット

▲株式会社ロケット

「株式会社ロケット」は、メディアとプランニングに強みをもつ広告会社です。コーポレートサイトは、Studio Platinum Expertsを保有する株式会社gazが制作を担当。

手書きのメモ帳が重なり合うようなデザインのサイトで、「ask us」ボタンにも綴じ穴をモチーフにした円形の装飾が施されています。カーソルを乗せると、お問い合わせや資料請求のボタンが表示される仕組みです。遊び心がありつつも機能性を損なわないボタンデザインとなっています。

＞株式会社gazが作ったStudioのWebサイト制作実績一覧

最後に

本記事では、Studio Expertsが制作したWebサイトの中から、ボタンデザインが魅力的な事例を紹介しました。

今回ピックアップしたWebサイト以外にも「Studio Showcase」ではStudioで作られた世界中のWebサイトをジャンルやテイスト別に探すことができます。ボタンデザインのアイデアが浮かんだら、ぜひStudioで実装してみてください！