スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeウェブデザイン基礎講座 > ウェブサイトの背景に大きい写真を使うことについて

ウェブサイトの背景に大きい写真を使うことについて

投稿日:2014年2月13日

このチュートリアルでは、ウェブサイトの背景に大きな写真の使用ついてご紹介します。

Step1:はじめに

ウェブデザインのひらめきがいつでも役に立つのは、他人のクリエイティブな仕事を見ると自分の創造性が見つかるからです。
ウェブサイトが表現するビジネスや組織のコンテンツやコンセプトに応じて、明らかに異なるアプローチが存在します。
そのアプローチの一つとして、写真が主な要素となり得ます。

ウェブデザインで、大きな写真がよく使われるようになり、特にウェブサイトの背景としての役割を演じています。
大きな写真は素早くムードやカラーパレットを作ったり、ウェブサイトの意味や目的を伝えやすくなります。
人の注意を引くために写真がよく使われていて、背景として最適な写真を使うことは大切ですが、たいていは、トリッキーな写真加工が求められることを知っておく必要があります。
さらに、ユーザーが使うブラウザのサイズに応じて写真をリサイズするのは比較的難しく、最新のCSSとか、場合によってはFlashとか、見た目を良くするために使う必要があります。



Step2:ウェブサイトの背景に大きな写真が使われているサイト例

サイトがクールであればあるほど、背景はキャッチーでイノベーティブになります。

背景に大きな写真

ユニークな背景はこのウェブサイトのコンテンツをシンプルに伝えます。

背景に大きな写真

この背景の画像には、このサイトが飲食店であるという思いがあります。

背景に大きな写真

ここの背景に込められた大きなコンセプトはいいですね。
それだけではなく、カスタマイズしたバブルボタンにはただ感心します。

背景に大きな写真

よく作り込まれた背景によってこのウェブサイトはなんだろうと思わされます。
タイポグラフィが最小限なので、サイトの画像の背後のストーリーに集中できます。

背景に大きな写真

背景に大きな写真

大きな背景イメージで見事なまでの効果を作り出せます。
高解像度モニターにはさらに効果的です。
伝統的なタイル状の背景グラフィックと比べてサイトデザインがさらに活き活きとします。

背景に大きな写真

背景に大きな写真

背景に大きな写真





Step3:サイトに背景を入れるのに役立つチュートリアル

背景にCSSを使う時に知っておく必要があるもの
Backgrounds In CSS: Everything You Need To Know

CSSを使ってウェブページの背景を作るテクニック基本編
Basic Web Page Background Techniques with CSS

ページ全体に完璧な背景画像を作る
Perfect Full Page Background Image

シンプルなレイアウトをパターン、写真、背景と組み合わせる方法
How a Simple Layout Can Be Mixed 'n' Matched with Patterns, Photos and Backgrounds

ハウツー:大きい背景に使うCSS
How to: CSS Large Background



Step4:いつものように、使えるテンプレート

タイプ:XMLとフラッシュのサイト
作者:Cowboy
使用するソースファイル:.swf / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
製品説明:HTMLバージョンは含まれていません
幅:1600px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Oldman
使用するソースファイル:.swf / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
製品説明:HTMLバージョンは含まれていません
幅:1920px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Nessy
使用するソースファイル:.swf / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
製品説明:HTMLバージョンは含まれていません
幅:1500px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Sawyer
使用するソースファイル:.swf / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
製品説明:HTMLバージョンは含まれていません
幅:1200px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Pearl
使用するソースファイル:.swf / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
製品説明:HTMLバージョンは含まれていません
幅:1200px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Pearl
使用するソースファイル:.swf / .html / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
幅:1200px

背景に大きな写真

タイプ:XMLとフラッシュのサイト
作者:Hugo
使用するソースファイル:.swf / .html / .psd / .fla / .xml
必要なソフトウェア:Adobe Dreamweaver 8以上 / Adobe Photoshop CS以上 / Adobe Flash CS3
テンプレートZIPパッケージを解凍するソフトウェア:WinZip 9以上 (Windows) / Stuffit Expander 10以上 (Mac)
幅:1920px

背景に大きな写真



Step5:最後に

大きな写真を使うウェブサイトは、モニタの解像度やインターネットのスピードが向上するにつれて一貫して人気が高まり、オーバーサイズの写真をウェブサイトの背景に使うデザイナーが増えています。
大きな背景写真によって実生活の小さな一部がウェブサイトに反映され、驚きと活気を加えます。
ウェブデザインは写真とデジタルアートに移りつつあります。



引用:Web Design Library 著者:StacySummers 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング