iPhoneやipadなど利用されている方も多いapple製品ですが、Webサイトの美しさも魅力的なデザインのひとつではないでしょうか。
Webデザインにおいてもapple社の与える影響は少なくともあるようです。
海外デザインブログWeb Design Ledgerで、appleのホームページに影響されたWebサイトデザインを35個まとめたエントリー「35 Inspiring Mac Related Websites」が公開されていたので、今回はご紹介します。
どれもシンプルなミニマルデザインに細部までこだわったディテール、インパクトのあるイメージ画像などを利用するケースが多いようです。
今後のWebデザイン制作のアイデア、参考としていかがでしょうか。
詳細は以下から。
Appleのホームページに影響を受けたWebサイトデザインまとめ
シンプルでクリーンなデザインだけでなく、iTunesカードをモチーフにしたようなイメージ写真が印象的なWebサイトデザイン。
iPhoneアプリ用Webサイトでよく見かけるデザインのひとつではないでしょうか。
iphone, iPad用アプリ販売用サイトで、イラストデザインを中心にデザインされています。トップ部分に本体画像を配置することでボックスから飛び出たような効果を表現します。
紫色をメインカラーに花柄オーナメントパターンを背景デザインとして利用したWebサイトデザイン。
伝えたい情報をすっきりと余白スペースたっぷりでレイアウトすることで、ユーザーにも分かりやすいコンテンツ表示をうまくすることができそうです。
落ち着いた色使いでデザインされたノイズ系テクスチャを背景に使い、分かりやすくアプリの説明をしているWebサイトデザイン。
ファーストビューで全体の情報を閲覧できるなどこだわりを感じます。
iPhoneに付属キットをつけることでクレジットカード決済に対応できるアプリ、ちょっと怖い気もしますがフリーマーケットなどでもクレジット決済可能になりますよ。
ヘッダー部分に印象的なイメージ画像をレイアウトすることで、見た目のインパクトがすごいWeｂサイトデザインのひとつ。
商品紹介ページもappleから影響受けまくってますね、。
紙のような質感のテクスチャ素材や思わず押したくなるようなボタンデザインなど、細かい部分にも気を配りデザインされたiPhoneアプリ用Weｂデザインまとめ。
保存されているpngファイルを最適化して容量を下げてくれるアプリ用Webサイトデザイン。
ボタンやベクターデザインなどどれも細かい部分まで本物そっくりに忠実再現されています。
Photoshopのレイヤースタイルを適用してデザインされたテキストロゴやノイズ系背景テクスチャ素材など多くのトレンドを取り入れたシンプルなアプリ用Webサイトデザイン。
大ぶりな継ぎ目の無い花柄オーナメントデザインを利用した背景が、エレガントな印象を与えてくれるデザインのひとつで、テキスト色など個人的に参考にしたいのでメモとしてエントリー。
シンプルなレタープレスロゴに、実際アプリを使用している様子をそのままデザインしたイメージ画像をレイアウトしたWebデザイン。
作りこまれたボタンデザインや、ボックス枠のシャドウ設定など今後のWebデザインに参考になりそうな部品が多く使われています。
デザイン共有サイトDribbleをより個別デザイナー別にデザインを確認することが可能なアプリケーション、ノイズテクスチャを背景に利用するケースが多いように感じます。
上部に設置してあるボタンをクリックすることで、iPhoneバージョンとiPadバージョンの2種類を展開するユニークな仕掛けが組まれたWebサイトデザイン。
iPadを使っていないときに置き時計として利用することが可能なユニークなアプリ用Webサイトデザイン。
画面幅いっぱいに表示されたスクロールバーでサンプルを確認できますよ。
GoogleリーダーをiPadで効果的に閲覧することが可能なアプリで、トップ部分にでかでかとイメージ写真をレイアウトしておりインパクト大。
色の明るいウッドテクスチャを背景に利用し、アプリのイメージとうまく合わせたWebデザイン、ドミノがずらずらっと並べられたユニークなアイデアがナイス。
世界中の時間を一覧表示するMac専用アプリ用Webサイトで、シングルページのみで構成されておりappleを代表する色使いが分かりやすいです。
ほとんどのWebサイトでグリッドレイアウトを利用したデザインが用いられているようです。
特にアプリなどコンテンツに限りのある場合などは、あえてシングルページに情報をまとめることでユーザーにも分かりやすく伝えることができそうです。
グリッドレイアウトを利用したウェブサイトの作り方やグリッドレイアウトを利用したWebサイトデザインなども一緒に参考にしていただくとよいかと思います。
[参照元 : 35 Inspiring Mac Related Websites | Inspiration – Web Design Ledger]
