reynato.tokyo

CREATIVE TOPICS

2018.04.27

DESIGN

おしゃれなwebサイトを作るためのポイント

Scroll Down

おしゃれなwebサイトを作るためのポイント

 

HTMLCSSさえ知っていれば、誰でもwebサイトを作成できます。

しかし、おしゃれなサイトを作りたい場合はそれだけでは技術的に不十分です。

webサイトをおしゃれにするポイントは「画像を使いこなす」ことと「効果的なエフェクトを用いる」ことです。

特に後者のエフェクトに関しては種類が多く、枚挙にいとまがありません。

今回はおしゃれなwebサイトの特徴を確認しつつ、その肝となる画像やエフェクトに焦点を当て、解説いたします。

 

おしゃれなwebサイトって具体的にどんなもの?

 

webサイトを見た時、思わず「おしゃれ!」と感じる理由は何なのでしょうか。

 

画像·写真

見た人におしゃれと思わせる特徴の一つとして、画像や写真の使い方のうまさが挙げられます。

おしゃれなサイトはテーマやコンテンツの内容に沿った画像が掲載されていることはもちろん、テキストと組み合わせる時の配置や、文字色なども配慮されています。

 

フォント

webサイト上にテキストを掲載する際は、その背景色を踏まえた上で文字色を選ぶべきです。

おしゃれなサイトはこうしたバランスがしっかりと取れているので、読んでいても疲れづらく、テキスト特有の圧迫感がありません。

 

カラー

配色は多くのwebデザイナーが頭を悩ませる点です。

おしゃれなサイトはベースカラーやメインカラー、そしてアクセントカラーの配色と配分がなされ、安心感と同時にオリジナリティを引き出しています。

 

画像の使い方

 

おしゃれなサイトを作る際、テキストやカラーに加えて大事な要素が「画像」です。

テキストとは違い、よりダイレクトに情報が伝わる点が「画像」の特徴です。

 

画像を左右一杯に広げて使う

トップページのヘッダーなどではこまごまと画像を使うよりも、オリジナルの画像をめいっぱい広げて使う方がインパクトも大きく、読者への印象も強くなるでしょう。

特にスマホでサイトを表示する場合、小さな画像だと見えづらくインパクトにも欠けます。そのため、画像や写真を使う時はなるべく横幅を広くとり、大きく見せるように調節する点がコツです。

 

画像上のフォントカラーは白に統一

もう一つ、画像を使ったおしゃれ演出の方法として「画像上にテキストを配置する」テクニックが挙げられます。

画像上に配置しても違和感がなく、かつ可読性を高くするならテキストは必ずフォントカラーを「白」にしましょう。

こうすると画像を文字でくり抜いたようなデザインになり、画像に干渉せず読みやすさを引き出すことができます。

 

効果的なエフェクト

 

CSSJavaScriptによって、webサイトへのさまざまなエフェクトを実装できます。

その一例をここで見てみましょう。

 

パララックス

パララックスはページのスクロールに合わせてサイト内のボタンやイラストが動いたり、コンテンツを表示·非表示したりするテクニックです。静的なwebサイトに動きがつくため、読者の興味や関心を引き出すのに効果的とされています。

 

ヒーローヘッダー

トップページ上部の画面いっぱいに広がる画像のことをヒーローヘッダーと呼びます。webサイトにアクセスした際、真っ先に目へと飛び込んでくるため視覚へのインパクトも大きく、読者へより強い印象をつけるエフェクトとして知られています。

 

縦書きレイアウト

日本的で和風なwebサイトを演出するなら縦書きレイアウトがおすすめです。

上から下へ、右から左へと読ませるこのレイアウトは日本人になじみやすく、書籍にも似た感覚で文章を読み進められる点が大きな特徴です。

 

おしゃれなサイトの特徴は大きく分けて、読者の目を引く「画像」、サイトの雰囲気に合った「フォント」、バランスのとれた「配色」の3つです。

特にビジュアル的にインパクトの大きい画像やwebサイト全体に動きをつけるエフェクトに関する技術は、今後のwebデザイナーに必須と言えるでしょう。

webサイトの持つおしゃれの条件はこれだけに留まりません。

普段から多くのwebサイトに触れてそのデザインを見ておくと、表現の幅が広がっていくのでおすすめです。

 

https://qiita.com/

https://www.m-hand.co.jp

https://ferret-plus.com

https://handywebdesign.net

https://webdesign-trends.net