WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

サイト全体の装飾を抑えてコンテンツに動きをつけることでさらに魅力的なデザインに

   

名称未設定 1

KinKi Kidsのオフィシャルサイト「KinKi Kids 20th Anniversary」です。

20周年を記念した特設サイトに使用されているロゴがとてもかっこいいサイトです。
ロゴ自体はとても重みを感じるようなデザインなのですが、サイト全体の雰囲気が重くなってしまわないようにフォントや線はとてもシャープなデザインになっています。
ファーストビューで使用されているジャケット写真もピンク系のピンクから水色のグラデーションになっているので、淡く優しい印象を受けます。

下にスクロールすると、グレーの背景色に明るい茶色を使用した落ち着いた雰囲気になります。
ひし形のタイトルや、斜めに切り取られたコンテンツやボタンはサイト全体に動きが出ています。さらにタイトルにはボックスシャドウをかけることでコンテンツに奥行きが出ています。
他のページに移動するときもコンテンツが斜めに切り替わって表示されてカッコいいです!

サイト全体の装飾は抑えている分、コンテンツが表示されるときやページが切り替わるときに動きをつけることで、ひと味違ったデザインになりますね!
スマホ版ではメニュー部分も斜線を使ったデザインになっていて、さらに動きのあるサイトになっています。

 - 色で表現 , ,

  関連記事

思わずお腹が空いてくる!お菓子のブランドサイト3選!

こんにちは!お菓子が大好きな社会人です! 今回は、「湖池屋」「カルビー」「森永製 …

グレーとゴールドを使ってデザインされた鉄工所のサイトがカッコいい!

千葉県富津市にある鉄工所「大栄鉄工所」のホームページです。 濃いグレーとゴールド …

色とアイコンを中心とした、どんな年代にも受け入れられるデザイン

「一般財団法人 神戸住まいづくり公社」のホームページです。 どんな年代の人でも見 …

参考にしたい!グラデーションを使ったwebサイト5選!

最近はグラデーションを使ったデザインのwebサイトをよく目にします。色鮮やかなグ …

ページの1番上にも、アクセスページに移動できるボタンを配置する

福井県越前町の観光情報を紹介する「えちぜん観光ナビ」のホームページです。 画面に …

キャッチコピーで見る人の心を掴む!KOSEの「feliscent」

KOSEの取り扱い商品「feliscent(フェリセント)」のホームページです。 …

砂浜のようなテクスチャとハイビスカスを使ってハワイアンな雰囲気を演出したウェディングサイト

東京都港区にオフィスをかまえているウェディングサポートをするプロジェクトチーム「 …

後ろのアイコンが流れるのに対し、赤十字マークと中央の文字は動かさずに立体感をだす。

島根県日本赤十字社「益田赤十字病院」のホームページです。 トップページの赤い色が …

右上の部分に必要な情報を常に掲載しておく

  千葉県にある貸し別荘を提供する「コテージ・フラミンゴ」のホームペー …

富士山×山中湖×野外フェス!壮大な景色の中でのフェスは興奮すること間違いなし!

今年の8月26・27・28日に山梨県南都留郡で開催する野外フェスティバル「SPA …