マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBサービス WEBデザイン WEB制作

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

投稿日:2014年12月15日 更新日:

こんにちは!風邪っぴきのweb初心者Kです。

週末に風邪を治しきれず、咳のため未だマスクが手放せません。
今日は誰とも口をきけないかも知れない!!!

みなさまはお風邪など召されていませんか?

さてさて、そんな私ではありますが、
今日はwebデザインのトレンドだけにとどまらず、
1pxまで神経が行き届いているなぁ、
と感じる緊張感のあるデザインのサイトをご紹介したいと思います!
ワクワク。
まずひとつめはコチラ!<全面画像+ポリゴン+α>

RINN Inc.

http://rinn.co.jp/

ワイド画像や背景の装飾にポリゴンなどトレンドをさりげなく取り入れています。
特にポリゴンの使い方は、空間に広がりを感じさせる
動きやサイズ感のバランスが絶妙で、センスがキラリと感じます。

また、上記企業の商品サイトもこちらにあります!(↓下記)

 

自動給餌器 PETLY

http://petly.jp/

どちらのサイトもベースカラーは無彩色ながら、装飾の動きや、
写真の柔らかいトーンから無機質さを感じさせません。

また商品サイトは文字を読まなくてもどんな商品なのか一目瞭然のスゴさ!!
しかもページ下にすごいスピードで走っている猫ちゃんのイラストが
常に表示されていて、なんだろう??とつい先を見てしまいます。
ページの最後では、猫ちゃんがこちらの商品(自動給餌器)に
たどり着くんですが、この演出に、私は心をがっつり掴まれました。
このサイトを見たら飼い主まっしぐら!なハズ!!

 

そして、お次の素敵サイトはこちら!<ワイド動画+α>

ATH MSR7(ポータブルヘッドホン)|オーディオテクニカ

http://www.audio-technica.co.jp/atj/sc/msr/

動画をワイドに使ったトレンドを取り入れているだけでなく、
ナビゲーションの動き・使い勝手など、
見習いたい繊細な心配りを感じます。

また、同じようにナビゲーションが
途中から固定になる縦長サイトはこちら

http://housevision.muji.com/

http://www.shimofuri-ginza.com/

http://haremachi.com/hanpu/

とっても使いやすいですので、
この動きは縦長サイトには定着しつつあるように感じます。

その他にも個人的には、グリッドデザイン+αで、
グリッド内の写真がマウスオーバーで少し拡大される動きを
よく見かけるようになった気がします。

http://www.felissimo.co.jp/500/

http://www.nintendo.co.jp/

http://nike.sskamo.co.jp/

トレンドもとても大切ですが、+αで細かいところまで気配りがされているサイトは、
ついつい長居したくなってしまいますよね!

いかがでしたでしょうか?

私もたくさんの方に「お・も・て・な・し」が、感じられるようなサイトづくりを心掛けて、
日々精進したいと思います!

 

そしてそして、もしこのブログをご覧になった方で素敵サイトづくりにお悩みでしたら、

マーカネット株式会社にてホームページ制作やご依頼を承っておりますので、

お気軽にこちらからご相談ください!

 

ではでは、本日の素敵サイトの旅はこれにて。

ドロン!

-WEBサービス, WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

2014年秋冬の流行色?

こんばんは、新人Aです。 すっかり気温も秋めいて来ましたね! 季節が変わると気になるのは流行色!ファッションやデザインには欠かせない流行色ですが、今年は何が流行っているんでしょう? ずばり、【ラディア …

【Vol.5】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

冬っ子のわたくし、この暑さもう限界です 皆様こんにちは。いかがお過ごしでしょうか? 真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。   明日から気温が落ち着くようで …

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

STEP1. まず加工したい写真素材をPhotoshopで開きます。 STEP2. 背景の写真レイヤーの上に文字を入力し配置します。 STEP3. レイヤーパレット上でテキストのレイヤーを右クリックし …

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …