Tag: Webデザイン
WEB制作
【色で見る!】美しいデザインが魅力的なECサイト5選!【イエロー編】
こんにちは、引き続き花見が楽しみな相馬です。
花見の「花」ってイコール桜ですが、他の花でも良い気がします。菜の花とか。
ということで、色別に魅力的なECサイトのデザインを紹介するシリーズの第四弾。
今回は菜の花の「黄色」に絞ってみました。
黄色は若々しさだったり、活発、あとはひょうきんなど、基本的にポジティブな色。
子供向けを連想させるカラーでもあります。
デザイナーとしても使いやすい色で、ボク自身よく使う色のひとつです。
春らしい、パパっと明るいサイトが並びました。
それではどうぞ。
黄色が映える、美しいデザインのECサイト5選
函館カール・レイモン
函館カール・レイモン
本場ドイツのソーセージを中心とした加工肉のECサイト。
木目をベースに黄色をポイントカラーにして、食材を扱う上で大切な信頼感を感じるサイトです。
メインイメージを中心に散りばめられた写真が美味しそう。
黄色を沢山使っているわけではありませんが、質感を加えていることと重要なポイントで使用しているおかげで印象が強いですね。
オレンジともマッチしています。
越後妻有オンラインショップ
越後妻有オンラインショップ
越後妻有の特産物などが通販で購入できるECサイト。
ちょっと質感がある白ベースに、黄色と黒がマッチしてパキッとしたPOPなイメージに。
地方の通販のどこか"田舎っぽい"イメージを覆す意外性のあるデザインです。
商品に対するマイナスとなりそうなイメージを、デザインで払拭することも出来ます。
こちらも黄色の使用量のバランスが良いですね。
旅する丸干し 株式会社下園薩男商店
旅する丸干し 株式会社下園薩男商店
メインのスライドショーがインパクトのあるサイト。ウルメイワシのオイルというちょっと新しい食べ方の商品。
「各国の味をイメージしたオイルとウルメイワシ」というコンセプトを軸にしており、キャッチーなイラストや洋食の写真が目に飛び込んできますが、使用する黄色や青も明るめではなくちょっとくすんだ色にすることで、どこか和風を感じさせます。一見イラストとミスマッチと思える明朝のフォントもミソですね。
各商品のおすすめの食べ方も、購入を迷っているユーザーの背中を後押しするコンテンツとして参考にするべきポイントです。
シュークリーム専門店 ビアードパパ
シュークリーム専門店 ビアードパパ
シュークリームがところどころに散りばめられた、お腹の空いている今のボクにはたまらないECサイト。
黄色をガッツリ使ってシュークリームのイメージをますます具現化しています。
ボタンのマウスオーバーのふわっとしたエフェクトも、シュークリームの生地感を連想させますね。
ファーストビュー左部にあるシュークリームの小さなスライドがちょっと新しい使い方に感じました。
新潮文庫の100冊 2015
新潮文庫の100冊 2015
新潮文庫おすすめの100冊、2015年のECサイト。
様々な無駄に楽しいコンテンツがいっぱいあります。きっと制作者も楽しく作ったんじゃないでしょうか。
色とは関係ありませんが、"無駄だけど面白い"要素はデザインだからこそできる要素ですね。
濃い黄色をベースに、手作り感のあるイラストが温かく親しみやすさを感じさせます。
サウンドもとっても良いので、ぜひ音ありで閲覧してみてください。
まとめ:身近さを感じる「黄色」
以上、黄色が効いているデザインのECサイトを5つ挙げてみました。
黄色をポイントで使用することによって、高級感よりは親しみやすさ、お求めやすさをアピールすることに一役買っています。
どのサイトも使い方が上手ですよね。
親しみやすさは信頼感や安心に繋がります。
子供向けの商品や、口にするものを取り扱うECサイトであれば、メインカラーには黄色を候補に入れておくことをオススメします。
黒やグレーなどにもとても相性の良い黄色は、サイト全体を和やかに明るくさせるには持って来いの色だと思います。
ではでは。
WEB制作
新人デザイナーに教えたい!絶対に買っておくべきWebデザイン書籍5選!
こんにちは、花粉症でひたすらくしゃみし続ける相馬です。
このままだと全身の水分がなくなるんじゃないか?と思うほどです。
さてさて、僕は現在、フリーのデザイナーとして生活しています。
誰でもそうですが、新人時代というものがありますよね。僕も5年ほど前にある会社にWebデザイナーとして就職したんですが、その時はほんとに右も左も上も下も、前も後ろも斜めすら分からずに必死の毎日でした。
今回はそんな5年前の僕のように、この春からデザイナーになった方や、これから目指す方、まだ新人という自覚がある方、それぞれのデザイナーさんにぜひオススメしたい書籍をご紹介します。
余談ですがこういう"新人向け"の本って、今読んでも全然勉強になります。
基礎ってやっぱり忘れがちだし、読むことで初心に帰ることもできるし、まだまだやなあ、と思うことばっかり。一生勉強ですねー。
現在ベテランの域に達している方も読んでみても良いかもしれません。
新人デザイナーに読んで欲しいWebデザイン書籍
現場のプロが教えるWebデザイン&レイアウトの最新常識
現場のプロが教えるWebデザイン&レイアウトの最新常識
テクニックや技術本というよりも、Webデザインの基本的なレイアウトを実例を交えて、何故このレイアウトになったのか、その過程と理由がしっかりと分かる本です。
現在重要視されるUI視点での考え方がトレンドな感じですが、いつの時代も変わらない根本的な部分をしっかりと理解できると思います。制作している中でふと思い出す。そんなことが沢山書いてある書籍ではないでしょうか。
タイポグラフィの基本ルール
タイポグラフィの基本ルール
これ、周りにも結構読んでる人が多いし、有名な書籍ですが、ひとまず抑えておきたいもののひとつ。
会社に勤めていた時に感じていたんですが、どんな優秀な新人さんでも文字組が上手くいってないパターンって結構多いんですよね。
この本には"なんとなく"で文字を組んでいた新人時代の僕をめちゃくちゃ助けてもらいました。
ロゴの作成はもちろん、文字を使うデザインはWebデザインであろうと大切です。
神速Photoshop
神速Photoshop
Photoshopを独学で学んだ場合に多いのが、ひとつのやり方しか知らない、というパターン。
どうしても爆速で終わらさなければならない仕事は現場では山程あります。そんな時に、作業時間を減らしてクリエイティブな時間に充てられれば、デザインそのものを考える時間を増やすことが出来ます。
目からウロコのテクニックが満載です。マイデスクの棚には必ず置いておきたい一冊。
Webデザインの新しい教科書
Webデザインの新しい教科書
Webとはなんなのか、ということをしっかりと深く掘り下げて解説してくれます。
就職の為にとにかくテクニックを身につけてきた新人デザイナーにはぴったりな本。自分で身につけたテクニックをもう一段階上のレベルに上げてくれます。
改訂新版が出たので、また買おうか悩んでいます。
プロとして恥ずかしくない 新・WEBデザインの大原則
プロとして恥ずかしくない 新・WEBデザインの大原則
レイアウトや配色からサイト公開後の運用まで、すべての基礎を現場レベルで学べる本です。
図が分かりやすく、Webについて見つけた基礎をよりしっかりと自分に落としこむのに最適。
会社に入るまでに身につけた知識やテクニックを、どうやって現場に活かしていくかを考えるとき、この本が役に立つと思います。
まとめ:書籍だけでなく、能動的にWebデザインを身につける
以上、新人デザイナーにオススメのWebデザインに関する書籍を5冊ピックアップしました。
僕が会社にいた時に、後で入ってくる後輩たちには、テクニックは高いレベルで身に着けていても、それを生かし切れない「もったいなさ」を感じる子がとても多かったのを覚えています。
せっかく身につけたものは最大限活かして、Webデザイナーとして活躍したいですよね。
そのためには、仕事をこなす中でも能動的に知識やテクニック、見つけていく必要があります。
基礎は変わらなくても、デザインというものは日々進化していくもの。進化していく過程で、基礎がスカスカだと、どこかでポキっと折れちゃいます。
基盤をしっかり作れる時間は、新人の時が一番あります。
その間にしっかりと太い基礎を作っておきましょう。
ではでは。
EC・ネットショップ
ネットショップデザインの参考に!5つの代表的なレイアウト!
こんにちは、お酒は弱いけど飲み会の雰囲気が好きな相馬です。
雰囲気が好きなのでお誘いは基本断らないんですが、ちょっと飲むだけで気持ち悪くなってすぐリバース。気分が晴れてまた飲んですぐリバースのエンドリピート。お酒が強い人が羨ましい。
さてさて、ネットショップを長く運営していると、商品の売上やアクセスの傾向などさまざまな事情で、リニューアルの機会が訪れます。
また、これからネットショップを初めて本格的に運営し始める方もいるかもしれませんね。
Webサイトデザインに欠かすことの出来ない要素が「レイアウト」。
制作会社にオリジナルのデザインを依頼するときはもちろん、無料有料問わずネット上で配布されているテンプレートにも、さまざまなレイアウトのデザインが存在します。
今回は、ネットショップデザインの参考になりそうなレイアウトに着目。
レイアウトを5つの種類に分けながら、どんな時にそのレイアウトを活用するべきなのかをまとめました。
目的別、5つのネットショップのデザインレイアウト
なんと言っても扱いやすい「マルチカラム」
ネットショップだけでなくWebデザインにおいて普遍的なスタンダードであるこのレイアウト。
さまざまなトレンドが生まれ、デザインの傾向が移り変わろうとも、マルチカラムのサイトは数多く存在します。
特徴は、カラムごとに固定されたコンテンツが配置されるため、メインコンテンツとメニューの移動が簡単であること。
ユーザーにも優しい使いやすいレイアウトです。
商品詳細ページを見ながら、他のカテゴリに移動したいなんてときも、ひと目でどこをクリックすれば良いか分かるので、ネットショップにおいても定番と言えるレイアウトですね。数多くのブログでも採用されています。
参照:ガトーフェスタハラダ
左にカテゴリ、右に商品内容という、典型的な2カラムのネットショップのレイアウト。スタンダードでも無駄が無く使いやすい。
商品数やカテゴリ数、情報量の多いネットショップの場合は、マルチカラムがマストです。
臨機応変に管理しやすい「フリーレイアウト」
サイトの横幅を固定して、カラムが内容によって変化するフリーレイアウト。こちらもWebサイト定番のレイアウトです。
情報量が増えていっても応用の効く、将来の展開にも対応しやすいリスクの低いレイアウトです。管理面ではとても便利。
参照:Yahoo! JAPAN
日本で最もアクセスのあるサイトのひとつであるYahoo!JAPANのトップページもフリーレイアウト。検索部分は1カラムで、コンテンツ部分は典型的な3カラムのマルチカラムレイアウト。
サイトが成長してもあまりレイアウト崩れを気にすること無くコンテンツを追加できるために、商品以外にも情報更新が多い場合は便利ですが、ちょっと古くさい印象は否めません。
インパクトを求めるなら「ワンカラム」
最近急激に広がり、もはや定番となりつつあるワンカラムのレイアウト。
大きな写真を使ってダイナミックに演出したいときは、このレイアウトが活かされます。
ネットショップでも多く見かけるようになってきました。
参照:MORPHA WORKS
商品ページの写真も横幅いっぱいに大きく表示して、商品の特徴であるきめ細やかさも画面から充分に感じることができる。
大きな写真でリッチ感も出しやすく、こだわりのプレミア感の演出や、商品数は少なくともひとつひとつを丁寧に深く掘り下げてアピールしたいときなどはワンカラムのレイアウトがピッタリです。
たくさんの商品が並べられる「可変グリッドレイアウト」
ブログやメディアサイトなどでよく見かける可変式のグリッドレイアウトも、ネットショップに応用できそうです。
ユーザーのウインドウ環境に合わせてグリッドの並びがスムーズに最適化するため、情報を伝えるデザイン面でのスキが出来にくいメリットがあります。一度に多くのコンテンツへと誘導できるところも魅力です。
参照:quadro
ウインドウのサイズに合わせて配置が変化する可変式のグリッドレイアウト。大小の商品サイズのリズム感が心地よく、まるで写真を並べて商品を選んでいるような印象。
ネットショップでこのレイアウトにすると、一度に多くの商品を、比較的大きな写真で見せることができるのがポイント。お店のように、商品が棚に並んでいるイメージになります。
アパレルや雑貨など、写真が重要になる商品を取り扱う場合は、是非採用したいレイアウトです。
演出重視の「フルスクリーンレイアウト」
純粋に商品を販売するECサイトではあまり見かけないですが、フルスクリーンレイアウトはユーザーに強い印象を与えることが出来ます。
写真が主役になるので、こちらもビジュアル面がキモになるレイアウトです。
参照:Nike & Lidyana
動画をフルスクリーンで採用したとてもクリエイティブな例。単なる動画ではなく、ユーザーのクリックに合わせた商品を演出するインタラクティブな内容。スタートは右下のアラームボタンから。
ネットショップのサイトすべてのページをフルスクリーンにすることは難しく、あまり見かけません。
ただ、商品の特集ページや、商品ページへ誘導するためのコンテンツページでフルスクリーンを採用するのは、そのインパクト力を考えれば効果的だと思います。
まとめ:目的に沿いつつも、ネットショップには魅力あふれるデザインを
以上、ネットショップに採用したい5つのレイアウトでした。
レイアウトはデザインの重要な部分になるので、はじめの段階できっちりと決めていきたいところです。
その際には、目的や商品の性質とともに、魅力的なデザインになることをイメージしてレイアウトを決定しましょう。
ネットショップといえども商品を売ることだけが目的ではありません。
サイトのデザインは商品そのものの魅力を帰ることのできる力を持っています。実店舗で言えば、店内空間のデザインと一緒ですね。
そのサイトを訪れたユーザーが気持ちよく買い物ができる。
そんなサイトになるためのデザインを検討しましょう。
WEB制作
ECサイトで使いたい!Webデザインのパーツを集めたまとめサイト7選!
サイトのデザインをする時にあらかじめこんなのがいい!という明確なビジョンがある場合は、作業がサクサク進んでストレスフリーですが、実際は悩んじゃったりして作業が難航しちゃうことってありますよね。
他にも希望があってもそれを形にできないとか、この部分のアイデアが中々浮かばないなんてことも。
私の経験では、サイト全体はサクサクデザインが進んで、あともうちょっとで完成だ!っていう時にある一部分で詰まってしまう・・・なんてことがよくありました・・・。さっきまで順調だったのに!というショックからか集中力もプッツリ切れちゃって更に手が止まっちゃったりしてましたね。
だいたい皆さんはそんな時には色んなサイトを見たりすると思いますが、私のような状況だったら、部分だけ見たいなっていう時もありますよね。
そんな時ぜひチェックしたい、パーツのデザインを集めた7つのまとめサイトを今回はご紹介したいと思います!
ギャラリー形式になっているのでどれも見やすくて、更に勉強にもなるので一つくらいお気に入りに入れておくといいと思います。
ではさっそく見ていきましょう!
Croppy
Croppy
こちらのサイトはパーツ別にカテゴリ分けされているのでとても見やすくなっています。
企業ロゴも見れちゃうので、ロゴで悩んだ時なんかも使えちゃいますね!
更に見たいパーツをクリックすると、使用されている色が紹介されていたりするので参考にしやすいかなと思います。
PatternTap
PatternTap
こちらはデザインパーツに限らず、色での絞込やデバイスでの絞込など、とにかく絞込が幅広くできるのが特徴です。
パーツをみるのであれば、TypeやStyleから設定するといいかもしれません。
表示されるキーワードは選択したら選択するだけどんどん絞り込まれていきます。
登録されているサイトがどれも今風っぽいかっこいいサイトばかりなので、今どきのデザインができて勉強にもなりますねー!
UI Cloud
UI Cloud
サクッと検索するもよし、ただし英語なのでヘッダー部分の「CATEGORIES」ボタンからカテゴリを選ぶ方が簡単かもしれません!
カテゴリ自体は豊富ですし、色やOS、CSSやjQueryなどもあるので色んなデザインが揃っています。
中には時代最先端を意識したようなユニークで他にないデザインなんかも見られます!
他と違うデザインで刺激を受けたい時などにも使えそうですね!
CSSbake
CSSbake
POPなこちらのサイトでは、ギャラリーがかわいらしくデザインされていますね。
できることは他のサイトとほぼ同じですが、404ページのカテゴリも用意されています。
登録サイトは基本海外のものなので、海外の凝ったデザインを見ることができます!
Retrobanner
Retrobanner
バナーって難しいですよね!小さい範囲の中で画像・文字を使用して興味をそそられるものを作らなければいけません・・・
試行錯誤を重ねてみるも、中々良い形が思いつかない・・・という時はこちらのサイトを見て他のバナーを参考にしましょう!
サイズ・縦向き横向き・色・業種などが選べますし、登録バナーもとても豊富なのできっとあなたが目指しているバナーのお手本が見つかるはずです。
バナーデザインに行き詰まったら、ここをチェックしてみてください!
フッターデザイン.com
フッターデザイン.com
近頃ではフッターを凝ったデザインにするサイトがとても多いですよね。
実際に自分もやってみたい!と思ったら、まずこちらのサイトで参考フッター探しをすると良いと思います!
国内サイトを集めているので、参考にしやすいのではないでしょうか。
更に「イラスト」や「カラムメニュー」、「ページトップへ戻る」などカテゴリ分けもされているので絞ってみることもできます。
HEADER LOVE
HEADER LOVE
こちらはヘッダー部分のみを集めた海外のサイトです。
海外ものなので、海外のかっこいいサイトが見れちゃいます。
数は少ないですが、一つ一つが大きく載っているのでサイトに飛ばなくてもしっかりデザインが見れてしまいます。
そしてこちらのサイトはヘッダー専門ですが、フッターバージョンもあるようで、その名も「FOOTER LOVE」といいます。
フッターが気になったらこちらもぜひチェックしてみてください!
さいごに
以上!7つのデザインパーツまとめサイトをご紹介してきましたがどうでしたか?
国内サイトや海外サイトの部分デザインを見ていっぱい刺激をもらっちゃいましょう!
あーでもないこーでもないと一人でぐるぐる考えてしまっていると、逆に嫌になってきてしまうので要注意です。
あ、詰まった!と感じたら休憩するなり今回ご紹介させてもらったサイトを参考にするなりして、リセットするのがいいと思います!
ということで今回はここまでです!
みっしぇるでした。
WEB制作
Webデザインを始めたい人必見!今すぐブクマしたい良質ブログ7選!
こんにちは、スポーツ大好きの相馬です。
春が近づいてくると野球やサッカー、ゴルフなどの国内プロスポーツが始まってきてワクワクしますね。冬は何もないのがつまらんです。ちなみに運動は全くしません。見る専門です、ハイ。
いきなりですが、このブログを見ている方の中には、WebデザイナーではないけどECサイトの運営担当者さんが結構いると思います。そんな方の中には、実際にWebに触れてみて、Webデザイナーになりたいなあ・・・なんて思うこともあるんじゃないでしょうか?ありますよね?
そんな方のためにも、今回はブクマ絶対推奨のWebデザインが学べるブログを集めました。
ボク自身もデザイナーになる前に参考にさせてもらったサイトや、今でも毎日チェックするサイトなど、とってもとっても為にブログばかりです。Webデザインをやりたくなくても、これらのブログを見たらWebデザインがしたくてたまらなくなりますよ。
Webデザインが学べる良質なブログ7選
コリス
コリス
Webデザインを中心に、PhotoshopやIllustratorなど、Web周りのツールに関するウレシイ記事を量産している超有名サイト。
海外の記事の翻訳や、色んな時短方法など、現場よりの実践的な記事も多く、新米デザイナーもベテランデザイナーも学べるサイトです。
Basic Design Note
Basic Design Note
「"デザインの基本"を学び直すブログ」というコンセプトの通り、図を載せながら分かりやすく、丁寧に解説してくれるブログ。
更新が滞ってはいますが、デザインの基礎とは何年たっても変わらないもの。
新人さんや初心者さんはもちろん、基本を忘れがちなベテランだからこそ読まなければいけないブログかもしれません。
何事も基本が一番大事ですよね。
ホームページを作る人のネタ帳
ホームページを作る人のネタ帳
普通のデザインとは違う、人を集めることができるサイトをつくるための「Webデザイン」が学べるサイトです。
Webデザインの専門記事にあふれていますが、たまに投稿される雑記も学ぶべきことが多い良質な記事です。こちらも現場レベルだからこそのあるあるに溢れた記事が満載。Web制作における苦労面を知ることができるのもポイントです。
Webクリエイターボックス
Webクリエイターボックス
こちらもWebを学んだ方なら一度は目にしたことがあるであろうブログサイト。
図解入りで読みやすい文体が特徴で、初心者にも分かりやすく、Webの楽しさ、面白さを感じることができる記事ばかり。
些細なことを詳しく丁寧に解説する記事が多い印象。オススメです。
株式会社LIG
株式会社LIG
Web業界では超有名企業のブログ。自社メディアの先駆け的存在です。
真面目にフザケたお笑い系の記事が話題に上りがちですが、技術記事は社内スタッフの技術の高さが伺える内容のものが多く、とても参考になります。
ライブラリでジャンルがまとめられているのも読む側としてはありがたいですね。
DesignDevelop
DesignDevelop
無料素材やデザインに関する情報とともに、技術的なハウツー記事も豊富なブログ。
更新頻度も高く、短い時間でサラッと情報を取り入れられる程よい長さの記事で、毎日チェックするサイトのひとつに入れても良いかもしれません。
keisuke.tsukayoshi
keisuke.tsukayoshi
レイアウトも美しいブログ。
デザインももちろん、UIに関する質の高い記事が多く、アプリのデザインなどの参考にもなります。
デザインが美しいと、記事にも説得力がありますね。
まとめ:参考になるブログは、やっぱりデザインも優れている
以上、Webデザインの参考になるブログサイトを7つ選んでみました。
こうやって見ると、どのブログも記事が読みやすくて、ページの移動もしやすい優れたデザインばかりです。デザインについて話題になる記事をかける方たち。やっぱりブログも美しく構成されていますよね。
デザイン初心者さんも、新人デザイナーさんも、ベテランの方も、どんなに忙しくてもこれらのブログをチェックする時間をつくって、デザインについての情報を取り入れていきましょう。
常に変化していくのがデザイン。情報収集もデザイナーの仕事のうちです。
ではでは。
WEB制作
ECサイトのスマホデザインの参考にしたい!スマホデザインまとめサイト5選!
こんにちは、寝る前には布団の中でスマホでネットサーフィンが日課の相馬です。
仰向けでスマホいじってると、たまに顔に直撃落下して目が覚めちゃいますよね。
ここ2,3年でスマホユーザーが爆発的に増えると同時に、サイトのスマホ最適化の重要度も高まってきました。それはECサイトも例に漏れず、今後もスマホでネットショッピングをするユーザーは増えるばかりでしょう。
ECサイトの運営者の立場になると、リニューアルの難しいECサイトのスマホ最適化は頭を悩ますところだと思います。ECサイトはUIも大切。できるだけたくさんのECサイトのスマホデザインを見て、参考にしたいところです。
そこで今回は、ECサイトのスマホ最適化に役立ちそうな、スマホサイトのデザインを集めたサイトをピックアップ。
スマホサイトはPCのWebデザインとは性質が異なります。
ECサイトのスマホ化にお悩みの運営者さんは是非ブックマークして、参考にしてください。
ECサイトのスマホデザインの参考になるまとめサイト5選
AGT smartphone design gallery
AGT smartphone design gallery
国内だけでなく、海外のイケてるスマホデザインも集まっているサイト。
サムネイルをマウスオーバーするとシュルシュル〜っとアニメーションでスクロールされて全体のデザインが見れます。
ショッピングタグでECサイトに絞り込めるのもウレシイです。
iPhoneデザインボックス
iPhoneデザインボックス
こちらも有名なスマホデザインまとめサイト。
大きな特徴は、各サイト詳細ページでスマホデザインとPCデザインのサムネイルを並べて見ることができる点。
これ地味に助かります。
こちらも「EC・ショッピングサイト」のカテゴリがあります。
iconDrop
iconDrop
こちらはスマホサイト全体のデザインでは無く、スマホのホーム画面にブックマークした時に表示される、Webクリップアイコンのまとめ。
Webクリップアイコンの有る無しでデザインのクオリティは変わってきます。スマホサイトを用意した時はぜひとも作成しましょう。
アプリのアイコンもありますが、いずれにしろ参考になるものばかりです。
thinkthing
thinkthing
こちらはユーザーが登録するタイプの優れたスマホサイトデザインのまとめサイト。
ユーザーが集めるだけ会って、国内外問わずデザインの数も豊富です。
ショッピングサイトのカテゴリも、すでに100サイト以上になっています。
Responsive Web Design JP
Responsive Web Design JP
こちらはスマホサイトのデザインに絞ったわけではなく、レスポンシブデザインだけを集めたまとめサイト。
スマホだけではない、デバイスの多様化の今後を考えると、運営しているサイトをレスポンシブにしておくことは重要かもしれません。
まとめ:スマホではより分かりやすく、使いやすく。
いかがでしょうか?この5つのサイトだけでも、十分すぎるほどのサンプルがあります。
スマホサイトとPCサイトではユーザーの環境や閲覧時間も異なるため、元のPCデザインのテイストを保ちつつ、ボタンのサイズや写真の見え方など、少し性質が変わってきます。
PCサイトと見比べながらスマホのデザインを見ていくと、沢山の新しい発見があります。
引き出しは沢山あればあるほど良いアイデアが生まれやすくなります。
ぜひぜひ暇な時にでも、これらのサイトをじっくり見てみることをオススメします。
ではでは。
WEB制作
【色で見る!】美しいデザインが魅力的なECサイト5選!【グリーン編】
こんにちは、寒い時期も終わっていよいよ春ですね。花見が楽しみな相馬です。
正直桜はあんまり興味が無いんですが、外でワイワイ皆とお酒が飲めるのが楽しくてしょうがないです。
さてさて、今回は色別に魅力的なECサイトのデザインを紹介するシリーズの三回目。
今回はグリーンに着目しました。
落ち着きや自然のイメージが強いグリーン。
見ているだけでリラックスできる、洗練されたデザインが集まっていそうです。
それでは早速見ていきましょう。
グリーンが映える、美しいデザインのECサイト5選
グリーンスムージーナ
グリーンスムージーナ
グリーンスムージー専門店のECサイト。
動きのある大きなメインイメージがインパクト大。野菜の動きもキャッチーです。
グリーンスムージーの魅力が詳しく書かれていて、ユーザーを惹きつけます。
使用されている野菜や果物がところどころに散りばめられていて、目にも楽しいサイトです。
信級玄米珈琲
信級玄米珈琲
グリーンというよりは、森や林といった緑の自然の写真を多用しているサイト。デザインとしては、各コンテンツページフッターに使っている景色写真。
緑が映える美しい写真で、サイト全体のデザインを引き締めています。
商品自体へのこだわりの強さも感じられる、とても丁寧にひとつひとつ作られたデザインです。
インナチュラル
インナチュラル
ガーデニングやエクステリアに関する商品を扱うサイト。
こちらも緑のある写真とパーツを上手く使いながら、全体的にグリーンイメージのデザインにまとめています。
ショッピングページ自体は楽天サイトですが、底に至るコンテンツページはとても作りこまれていますね。ピンタレストとの連携で、ユーザーとの関係も大切にしています。
ステーブルズ
ステーブルズ
白ベースに深いグリーンが落ち着いた印象をあたえるシンプルなデザイン。
商品サムネイルの家の形がカワイイですね。
手書きのイラストを活かしたバナーや、カテゴリのシンプルなイラストなど、ほころびの一切無い一貫した雰囲気作りにグリーンが生かされたデザインです。
アウトドアロゴス
アウトドアロゴス
有名アウトドアブランド「ロゴス」。
明るいグレーと深いグリーンの組み合わせは相性が良く、この2色をうまく使って商品を引き立てています。やっぱり「自然」や「安全」といったイメージにグリーンは便利ですね。
まとめ:条件が合えばグリーンはとっても便利な色です
以上、グリーンを効果的にデザインしているサイトを5つ選びました。さすがにナチュラルな要素の強いグリーン。扱っている商品も自然に関わるサイトがほとんどでした。
グリーンは白との相性が良く、白ベースがセオリーのECサイトでは使い勝手が良い色です。
さらに「安全」というイメージを見る人に無意識に与えることが出来、デザイナーとしては「使いやすい色」のひとつです。
ポジティブな要素を沢山持ったグリーン。
商品や構築したいブランドイメージと合致すれば、積極的に使っていきたい色です。
ではでは。
WEB制作
ECサイトはバナーが大事!バナーデザインの参考にしたいサイト5選!
こんにちは、暖かくなってきて旅行に行きたいけど、この時期は極度の花粉症の身には外に長く居ることは超危険。
ジレンマを抱えている相馬です。
ECサイトを運営していると、期間限定のセールやキャンペーンの開催を告知するために、バナーを作ることがありますよね。
バナーの出来の良し悪しが売上に直結する意味では、通常のサイトと比べてもECサイトのバナーの作成量とその重要度は大きくなってきます。
今回は、バナー作成の参考になるサイトを集めました。
魅力的なバナーでユーザーの心を惹きつけて、アクセスと売上アップを狙って、ECサイトをもっと充実させましょう。
では、早速いってみましょう!
ECサイトのバナー作成に役立つサイト5選
バナーデザインまとめ。
バナーデザインまとめ。
とにかく沢山バナーを見たいならこちら。2016年3月現在で15000を超えるバナーが集まっています。
バナー広告についての詳しい概要を紹介する豆知識のようなページが、意外と役立ちます。
たまに見かけるFLASHバナーや、今や欠かせないスマホ向けバナーをまとめたブログもあり、眺めるだけでも参考になります。ブックマークしておきましょう。
banner gallery
banner gallery
バナーを作るときって、サイズに制限があるパターンがほとんどですよね。
そんな時に頼りになるのがbanner gallery。
細かいサイズ別に分けられていて、作成するバナーのサイズと近いものを参考にできます。
より実用的に参考にできるサイトですね。ブックマークしておきましょう。
レトロバナー
レトロバナー
レトロバナーはバナーデザインの詳細ページで、使用されている主なカラーを確認できるのが特徴。Photoshopで使えるカラーパレットのデータもダウンロードできる、制作者に優しいサイトです。
業種や色、サイズのほか、デザインのテイストで絞り込めるのもありがたいですね。ここもブックマークしておきましょう。
バナーデザインアーカイブ
バナーデザインアーカイブ
こちらはスクロールをすると次々にバナーが表示される仕組みになっています。ページ移動すること無く、沢山のバナーをさくさく見られるのが特徴です。
こちらもサイズや色、中にはTwitter向けバナーでも絞り込めます。時期に合わせたイベント用に集めてくれるのもウレシイポイント。やはりブックマークしておきましょう。
Web Banner Gallery
Web Banner Gallery
最後に海外のバナーデザインまとめサイト。
海外のデザインはシンプルなものが多く、日本のバナーデザインのセオリーとはやっぱりちょっと違いますね。
デザインに一捻り加えたい時や、外国人をターゲットにしたい時など、覚えておきたいサイトのひとつ。とにかくブックマークしておきましょう。
まとめ:サイトのデザインコンセプトを忘れないように
以上、バナーデザインの参考になりそうな5つのサイトをご紹介しました。
やっぱり並べてみると、バナーデザインには作成時のセオリーというものを感じますね。
色んなテイストのバナーをたくさん見る時の注意点としては、バナーを掲載するECサイトのデザインコンセプトがブレないようにすることです。
こうやって様々なデザインのところどころいいところを引っ張ってきても、根底にあるデザインコンセプトが無いと、良いバナーは出来ません。
ただの広告とならないように、サイトの雰囲気をぶち壊さず、それでいてユーザーの目に留まるデザインを心がけることが大事です。
ではでは。
Want to stay up to date with the latest news?
We would love to hear from you! Please fill in your details and we will stay in touch. It's that simple!