WEB制作
ECサイトにも導入したい!レスポンシブデザインの基本とポイントまとめ!
WEBサイト関連のお仕事を押されている方は知ってるはずの「レスポンシブデザイン」
PCやタブレット、そしてスマホなどのそれぞれのデバイスの画面サイズに適応したデザインを魅せることができるこの方法は、PCに限らず他端末がどんどん普及している今の時代には必要なものと言えます。
何よりも制作者側は修正や更新作業などがしやすいので、この手法を使いたい人も少なくないはずです。
そんなレスポンシブデザインをECサイトにぜひ利用したい!と考えている人もいることでしょう。
でもレスポンシブのデザインって、どういったことに気を付ければいいのでしょうか?
漠然とレスポンシブが良い!というのではなく、まずはレスポンシブの基本的な部分や注意ポイントなどを把握した上で自身のECサイトに合ったデザインを考えましょう。
そんなわけで今回は、レスポンシブデザインの基本とそのポイントをさっくりまとめてみたのでご紹介したいと思います!
レスポンシブな画像
MELOND PANE
メインビジュアルに工夫を
サイトを開いた時にまず一番最初に目に付くように配置されるメインビジュアル。
サイトの顔と言ってもいいくらい第一印象に影響するので最善の状態で全端末に表示させたいところですよね。多くみられるのは、やはり写真を大きく端から端に表示させる形だと思うのですが、果たしてその写真はどの画面サイズでも見栄えがいいものなのでしょうか?
例えば横長の写真で全端末の横幅いっぱいに表示させようとした場合、スマホでは結構小さなサイズになってしまいますよね。
その状態でも見栄えがよければ何も変更する必要はないのですが、何の画像か見にくくて意図が伝わらないのであれば魅せ方を変えるなり、端末別に写真を変更したりする必要があります。
使用したい写真が人物や物の単体だとしたら、ズームアップさせた状態を配置するというのもおしゃれでいいかもしれませんね!
CSSで実装できるところはCSSで、画像のファイルサイズは軽く
ECサイトやブログのような、運営しているとどんどん画像が増えていってしまうサイトは注意すべき点です。PCで見る分にはあまり感じないかもしれませんが、ネット環境の影響などでスマホなどの端末の場合、読み込み速度はPCと比べて落ちてしまいます。
そこでサイトに使用している画像の数が多いと、これもまた速度に影響してくるので、削れるものなら削りたい部分なのです。タイトルにもしましたが、この問題の対策は3つです。
アイコンなどは画像を使わずWEBフォントを使用する。
CSSで実装できそうなところは極力CSSで実装する。
画像はファイルサイズを軽くしてから載せる
WEBフォントは画像のように粗くなることがないなどのメリットもあるのでおすすめです。
ECサイトはフォントが重要!気軽に使えるWebフォントとおすすめのフォント5選!
画像のファイルサイズに関しては、検索したらたくさんツールが出てきますし、難しいことは何もないのでECサイトなどに限らずやった方が良いです。Wordpress使用者ならプラグインもあるので楽チンですね!
レスポンシブなレイアウト
株式会社アーバン・コネクションズ
レイアウトはあえて微調整程度にとどめる
そもそもレスポンシブに限らず、スマホやタブレットに適したサイトを作る理由はなんでしょうか?
不自由することなく各端末で自身のサイトを見れるようにするためですよね。
そこで別端末で見たときにサイトデザインやレイアウトが変わり過ぎていると、
「あら?別のサイトにきちゃったかしら?」
「さっきはここにナビがあったのに・・・」
など、迷子になってしまう恐れがあります。
ネットサーフィンに慣れている人ならあまり心配はいらないかもしれませんが、もし初心者だったら?
色んな場面を想定し、結果やはり端末によってデザインやレイアウトが変わり過ぎるのは、離脱率を上げてしまうことになりかねないので微調整程度にしておくのがベストだと思います。
カラム数を検討
上記ではレイアウトを微調整程度に、とお話ししましたが、カラム数に関しては増減調整が必要だと考えます。スマホなんかだと縦向きが主流ですし、横幅が狭くなるのでカラム数によっては窮屈になってしまいます。
後ほどまたお話しますが、スマホやタブレット端末では指を使った操作になるのでパーツなどが小さいと使いずらくなってしまいます。
カラム数を検討し、減らすなり、維持するなら幅や文字サイズなどを調整するなどをして各端末に合った構成にすることが必要です。そうすることでユーザビリティも向上し、見やすく使いやすいサイトの仲間入りもできるのではないでしょうか!
ナビゲーション問題
ナビのデザインは様々ですが、例えばPCのような横にずらーっと並ぶ型のナビをスマホでも使用したらどうでしょうか?
スマホサイズだと各ボタンが小さくなりすぎて、タップすると自分が意図としないものを押してしまったりしてイライラしちゃいますよね。
他の端末でもサイトを見れるようにするのならば、ナビは魅せ方を変える必要があります。
よくみるのが画面サイズが一定以上小さくなると、アイコンがナビの代わりに表示され、ナビボタンをすべてアイコンの中に隠してしまうパターン。
アイコンをタップすればナビがじゃららっと縦並びに表示され、もう一度タップすれば非表示になるので、スペースを気兼ねなく使えます。
他にもコンテンツをとにかく見てほしいから!という意図からなのか、サイトを開いたときのファーストビューがメインビジュアルなのではなくナビだというパターンもあります。
やり方はたくさんあります。ただまず頭に置いておかなければいけないのは、わかりやすさ・見やすさ・(クリック・タップの)押しやすさということです。
レスポンシブなサイズ感
SHOKI JOETAKI
タッチパネルに適したサイズ感
チラホラと上記で触れているのでもうお分かりかと思いますが、タブレットやスマホではマウスでクリック・・・ではなくフィンガーでタップです。マウスでならテキストリンクも簡単に押せていましたが、指でそれを押すとなると厳しいところがあります。
どの端末でも快適にサイト閲覧をしてもらうためには、やはりユーザビリティを上げることが必要となってきます。この場合、テキストリンクではなくボタンの形にし、更にボタンのサイズもやや大きめを意識してデザインするとタップしやすくなります。
それぞれに端末サイズに合ったフォントサイズを
お次は文字サイズです。
端末によっては、PCの設定をそのまま移行すると小さすぎたり大きすぎたりしてお世辞にも見やすいとは言えない結果になってしまうこともあります。
端末に合ったフォントサイズに変更する、ただそれだけなのです。
当たり前のことですが小さい画面だから文字も小さく!という調節の仕方をするとユーザビリティどころじゃなくなるので、常に見やすさを意識するようにしましょう。
縦と横向きの見栄えを考える
サイト全体をデザインする時に言えることですが、PCは横向きでもスマホは基本縦向きです。
タブレットはどっちでもいけますが、どっちでもいけるということはどっちも考慮しなければならないということです。
常に調節して、動作確認して、調節して、また確認してと繰り返しながら良くしていくしかありませんが、やはりサイトは見るものです。自分の目で見て、閲覧していて居心地のいいサイトになるよう調節していきましょう。
レスポンシブな動作
MRAssociates
時には効果的だったものも不必要になる
これはサイズ問題とも言えますね。
例えば、PCサイトではアニメーションや動画などを使用していた場合ですが、ネット環境やサイズ感などからみてあまりスマホには適しているとは言えません。
PCではインパクトを与えることができる上に、コンテンツにあれば文字だけでは説明しきれない部分を補える利点はありますが、閲覧者の環境に適していなければその利点は欠点になりかねません。これは挿絵や装飾などの画像類にも言えることです。
せっかく何かを補助するためにあるものでも、小さすぎでわかりずらくなってしまっていたりすると本来の意味がなくなってしまい、悪く言えば邪魔になってしまいます。
閲覧者にとって邪魔な存在になり、サイト全体に対してネガティブな印象を持たれてしまう前に、端末によって時には「排除する」ということも頭に入れておきましょう。
よかれと思ってやったことが実は逆効果に、なんて悲しすぎますからね!
ヘッダー固定は利便性が高い
端末によらず、ヘッダーが常に上にある状態は便利ですよね。
特にPC以外のタップなどをして操作をする端末の場合は、PCに比べてスクロールが面倒に感じることがあります。ちょっとのスクロールならいいのですが、ブログ記事やECサイトの商品詳細ページだったりすると、ページの先頭へ戻るボタンがないサイトは少し面倒に感じてしまいます。
そんな時ヘッダーがページ上部に常にある状態だったら、すぐにナビを開いて別コンテンツに行けるし、TOPに簡単に戻ることもできちゃいます。サイト名も常に視界に入るので、覚えてもらいやすいかもしれません。どの端末ユーザーにも優しいのでおすすめです。
最後に
以上、レスポンシブデザインの基本やポイントをさっくりご紹介してきましたがいかがでしたでしょうか?
個人的な意見も含まれていますが、実際自分の目でサイトを見て感じることは、世界規模で考えれば同じような気持ちの人は数え切れないほどいるはずです。レスポンシブに限らず、サイト制作を行う際はできるだけいろんな人にサイトを見てもらって意見をもらいましょう。
せっかく端末によっての変更がある程度できるので、タップやスワイプ操作を活用した動作を取り入れてみると画期的でいいかもしれませんね!デザインやレイアウトを大きく変えるのはあまり推薦しませんが!
現に、マウス操作でスクロールするのは縦方向で良いですが、スマホの操作の場合は横方向にスワイプするコンテンツ移動を好む人が多いという研究結果も出てるそうですよ!
参照元:https://www.nngroup.com/articles/horizontal-scrolling/
レスポンシブを利用してよりわかりやすく見やすい、そして使いやすいサイトを作るために、今回の記事をぜひ参考にしてもらえたらと思います!
ではこのへんで・・・みっしぇるでした!
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サイトのデザインコンセプトがブレないようにすることです。
こうやって様々なデザインのところどころいいところを引っ張ってきても、根底にあるデザインコンセプトが無いと、良いバナーは出来ません。
ただの広告とならないように、サイトの雰囲気をぶち壊さず、それでいてユーザーの目に留まるデザインを心がけることが大事です。
ではでは。
WEB制作
2016年!絶対に流行るWebデザイントレンド5選!
こんにちは、30を超えて人生で初めて髪の毛の色を変えようと目論んでいる相馬です。
フリーになったので顔を覚えてもらうために、手っ取り早く特徴を作ろうと思いついたんですが、周りには「絶対に似合わない」という理由でわりと反対されています。さて、どうしたものか。
話変わってWebデザインのお話。
Webデザインにはある程度"トレンド"というものがあります。
新しい技術を沢山のデザイナーがサイトに落とし込んで、それが定番化していくものもあれば、ただの流行りものとして消えていくものもあります。フラットデザインなんかはもう定番化して、ひとつのジャンルとして捉えられますね。
今回は2016年に流行りそうな現在のデザイントレンドを選んでみました。
デザイナーとしてトレンドには敏感になっておくべき。ものにするかしないかは別として、知っておくだけでも役に立つ場面があるかもしれません。
ではいってみましょう!
2016年に流行りそうなWebデザインのトレンド
動画で演出する
ここ最近、動画をデザインの要素として取り入れたサイトが徐々に増えてきました。この流れは2016年も加速しそうです。
動画は写真では伝わらない臨場感と情報量、よりリアルな情報を伝えることができます。
単純に演出としても閲覧者の目を惹きやすく、ストーリーさも相まって、サイトの滞在時間を増やす可能性を高めてくれます。
使い方としては、コーポレートサイトであれば社内風景を動画で見せたり、ECサイトなら商品の使い心地を実際に動画で見せることも出来ます。
実際に社員が働いている様子を動画で見せることによって、親近感と信頼感が湧いてくる。参照:WAAAC
動画にはデータそのもののサイズが重く表示に時間がかかったり、編集技術の必要性といったデメリットもありますが、サイトのクオリティを考えると積極的にデザインプランに入れていきたい技術ですね。
大胆な色使い
カラフルで鮮やかなカラーを大胆にデザインしているサイトは、海外から日本に広まりつつあります。
この色使いの流れは、今や定番のフラットデザインやマテリアルデザインとの相性が良いから、という理由から来ているように思います。
去年の中頃から広がり始めたこの流れは、これからもどんどん広がりを見せ様に感じます。
鮮やかなカラーを大胆に配置して、シンプルなレイアウトをよりいっそう引き立たせる。参照:SONR.(ソナー)タスク管理ツール
サイトの構成や扱うサービスや商品にもよりますが、鮮やかな色使いはそれだけでも人の目を惹きつけます。
頭に入れておいて損はないデザインパターンです。
大画面を意識したレイアウト
スマホの普及にともなって、レスポンシブを取り入れながら小さな画面にも最適化できるようなレイアウトの研究にデザイナーは没頭しています。
ただ、PCで閲覧する際のユーザーのモニターサイズは大きくなってきているのもこれまた事実。
そこを活かして、大型のモニターを意識したレイアウトが見られるようにもなりました。
質の高い高画質な写真をたっぷりと大きくレイアウト。大画面だからこそ活きるリッチなデザイン。参照:株式会社フォーデジットデザイン
それぞれのユーザーの環境に合わせて、最高の閲覧体験を整えてあげることも、デザイナーの腕の見せ所ですね。
SNSとのより深い連携
SNSとWebサイトの関係は、今や切っても切り離せないものになりました。
Facebookでサイト内の新着情報をまかなってしまったり、Instagramはサイトのギャラリーとしての役目も果たします。
ユーザーとの関係を深めるSNSは、情報を発信するWebサイトの抜群のパートナーになってきています。
Webサイトの重要性は、オープンしたその後の成長。それを大きく助けてくれるのが、SNSとの連携です。
社員の紹介ページでそれぞれのInstagramアカウントで投稿した写真が表示される。社員への親近感が、会社への信頼に繋がる演出。参照:株式会社LIG
ECサイトでのハッシュタグを利用したSNSとの連携キャンペーンなど、サイトとSNSとの共同コンテンツは、デザインという見せ方においてもますます幅広くなりそうです。
日本語フォントが普及する
Webサイトのマルチデバイス化によって、Webフォントの重要性は一層高まっています。
Retinaディスプレイ、4Kなど、ディスプレイ・モニターの性能はどんどん上がり、画像では限界のある「美しい文字」を見せるための工夫がデザイナーには求められます。
海外ではWebフォントのおかげで解決されつつある課題ですが、日本語のWebフォントは高価であったり、そもそも種類の少なさが叫ばれてきました。
ですが、この課題もGoogleの「Noto Sans Japanese」の提供開始から解決に向かいそうです。
ふんだんに日本語フォントが使用されているサイト。ディスプレイの解像度に依存すること無く、どんな環境でも美しく文字を表現できる。参照:type.center
2016年、日本語Webフォントがスタンダードになる可能性は高いかもしれません。
まとめ:新しい課題が生まれては、新しいトレンドも生まれていく。
以上、2016年に流行りそうな5つのデザイントレンドでした。
マルチデバイスによって、ユーザーの環境に合わせてデザインの最適化が図れるサイトが重要になってきています。
どのトレンドも、その考えに基づいた技術のように思います。
ユーザーの目を虜にするために、新しい課題が生まれては、それを克服する技術が生まれ、トレンドになり、スタンダードへと発展していく。その繰り返しが、Webデザインを成長させていくようですね。
ではでは!
WEB制作
【色で見る!】美しいデザインが魅力的なECサイト5選!【レッド編】
こんにちは、Instagramがほぼ全部犬の写真の相馬です。
さてさて、カラー別に魅力的なデザインのECサイトをご紹介するこのシリーズ。
今回は赤がメインカラーのサイトを集めました。
赤といえば情熱の赤。また、パッと明るくはっきりとした色なので、イメージカラーにしている企業やお店は多いですね。
なんとかレンジャーのリーダーはほとんど赤。そんな主役のイメージがある人気の色です。
サイトにとって見た目は大切な要素。特にECサイトの場合、取り扱う商品のイメージやお店のブランディングにも関わってくる大きなポイントとなります。
赤をテーマにしているサイトの運営者さんは、ぜひ参考にしてみてください。
それでは早速いってみましょうー。
レッドが映える、美しいデザインのECサイト5選
the day . AND READY
the day . AND READY
とても洗練されたサイトデザイン。白ベースにちょっとダークな赤がとても映えますね。
基本的にグリッドを採用して、それぞれのパーツやボタンが整理されてとてもわかり易く見やすい構成になっています。
各商品ページの「カートに入れる」ボタンにちょっと動きをつけて、クリックしやすい細かな工夫がされています。
Fuzzco
Fuzzco
商品写真以外は白ベースにほぼすべて赤でデザインされたサイト。
テキストまでも全て赤になっているのも珍しいです。色数は少なくとも、このデザインには使いにくさを全く感じません。
シンプルであることの美しさを感じることができるECサイトですね。
NUTSANDWOODS
NUTSANDWOODS
オシャレなインテリアのECサイト。
オレンジに近いですが、ここでも赤を効果的に使っています。
使っている量としては少なくても、はっきりとメインカラーが赤というのはわかりますよね。
このようにメインカラーはたくさん使えば良いというものではなく、ポイントをおさえて使用することで、ユーザーにより強く印象づけることが出来ます。
アーバンリサーチオンラインストア
アーバンリサーチオンラインストア
深い赤を効果的に配置して、サイト全体が落ち着いた雰囲気を醸し出しています。ブランドイメージに一役買っています。
デザインとしての目新しさは無くとも、日本人が使い慣れたECサイトの構成を丁寧に踏襲していて、とても使いやすいサイトになっています。
rockin' star★
rockin' star★
スタンダードな赤が目に飛び込んでくる、インパクトあるデザイン。
赤と黒の組み合わせと、使用しているフォントのイメージが、ROCKをテーマにしたサイトとマッチしています。
色だけでなくフォントや写真との組み合わせで、サイト全体のクオリティは劇的にアップします。
まとめ:赤は案外難しい色
以上、赤いECサイトを5つ選んでみました。
ピックアップしていて気づいたことは、「赤いECサイトは結構少ない」ということ。
冒頭に述べたように、良くも悪くも主役になりやすい赤という色は、商品を魅力的に見せたいECサイトにはあまり使われていないように感じます。これは意外でした。
とはいえ、赤とECサイトの相性が悪いとも思いません。
逆に言えば、ちょっと使うだけでも強い印象を与えられる赤は、ピンポイントに色付けしてあげれば効果的な色。白ベースとの相性は抜群だといえます。スタンダードなイメージのある赤ですが、実は玄人向けの色かもしれませんね。
赤は人を元気にできる、力強い色です。
上手く使えば、ECサイトで積極的に使っても良い色ではないでしょうか。
それでは以上!
WEB制作
通販カタログから学ぶ!購買欲を高めるECサイトの作り方!
近頃はもう春ですね!冬が好きだと言い続けてきましたが、こうもスッキリ晴れていて過ごしやすそうだと春が好きになりつつあります・・・みっしぇるです!こんにちは!
今では通販といえばECサイトですが、以前は通販カタログが主流だったのをご存知ですか?
定期購読で毎月もしくは毎シーズンカタログが自宅に届き、気に入ったものが見つかれば電話かハガキで応募するのですが、近頃はその以前までの勢いが失われつつあります。
時代の流れといいますか、どれだけネットというものが普及してきていて、世間の紙離れが進んでいるかが伺えます。
そうしてやむを得ずカタログを廃止してECサイトへ移行していく通販企業が多い中、カタログ販売一本で売り上げを維持している企業やカタログの廃止ではなくECサイトと連携させることでうまく活用することに成功したニッセンやベルメゾンなどの有名企業も存在します。
なぜそれらの企業は成功することができたのか?
それにはやはりカタログならではの良さというものがあるからなのでしょう。
これからECサイトを運営しようという人にとって、媒体は違うにしても同じ通販業界ですし生き残るために成功法はぜひ知りたいですよね!
今回はECサイトに活かせる、購買欲を高められるような通販カタログの良い要素を調べてみました!
魅せ方を凝ろう
カタログに限らずECサイトでも常に課題となる「魅せ方」。
様々な方法がありますが、ECサイトの場合は商品詳細ページだけでなく、イベントページや特集ページを設けられるので活用できる場は幅広いと思います。
ここで魅せる方法を頭に入れ、商品やテーマに合ったものを採用しましょう。
演出系
BEAMS
まずテーマを決めて、それに合わせた演出をしライフスタイルを提案するとともに商品を紹介するといった方法です。
普段の生活風景の中で商品が紹介されているのでとてもイメージしやすいですね。
雑貨や家具なんかでよく見られる方法かもしれません。
アイテム系
一つ一つの商品の詳細がぎゅっとつまったページ構成です。
情報をたくさん載せる分、見やすさをより考慮しながらレイアウトを考えなければいけないですが、消費者側としてはデザインや色の種類・素材感も知ることができるのでより購入しやすくなります。
やはりインテリア系や実際に身に付けたり使用するものだと、色や素材は重要な部分なので活用するといいかもしれませんね。
How to 系
FANCL
雑誌などではよく見られる、定番の方法ですよね。
商品紹介だけでなく使い方やテクニックなどが一緒に載っていて、商品の事がより理解できるので購買意欲を高めることができます。
生活用品やビューティグッズなどに効果的な手法だと思います!
読みやすさやわかりやすさを常に意識して
FELISSIMO
商品を紹介するとなると、やはり情報がたくさんあればあるほどいいですよね。よりどんな商品かが伝わりやすい。
しかし、詰め込めば詰め込むほど、残念ながら見やすさは落ちていくばかりです。
情報は大切ですが、その中でも重視すべきはやはり「見やすさ(読みやすさ・わかりやすさ)」です。
ここではカタログで採用されている方法をご紹介していきます。
必要な情報のみ載せましょう
あれもこれもと言ってすべて載せてはきりがありません。
消費者の立場から見て、選ぶときに知りたい情報はどれかをしっかり選定し、尚且つ文字だらけにならないように図や写真を使用するなど工夫しましょう。
消費者の生活向上や悩み解消に役立つかどうかを考えると選びやすいかもしれないですね!
フォントを読みやすいものに変更
誰だってぐにゃぐにゃしたものやユニークすぎるものだと読みにくいですよね。
フォントを探し出すと種類が多くで目が回りそうですが、近年ではユニバーサルデザインというものが多く開発されていて、判読性や視認性を高くするためにデザインされたものらしいのでぜひ探してみてください!
ゆるい要素もプラス
取り扱い商品やブランドイメージによって、これを採用するかは大きく左右されると思いますが、全体的にサイトが堅苦しいと消費者側も緊張してしまいます。
高級感があれば特別感が味わえるかもしれませんが、きっちりしすぎても購買意欲はかきたてられません。
そこでちょっとしたゆるい部分をプラスしてあげるのです。
カタログや紙面では、コミカルなイラストを見かけることがありますよね。あえて綺麗なイラストではなくコミカルというのがポイントです。
サイトの場合、イラストを使用できるようなデザインであればいいのですが、それが難しい場合は特集ページを設けたり、SNSを活用していればそこは少しゆるめにしてサイトのきっちり感とバランスをとるのもいいですね!
おすすめPOINTなどはしっかり打ち出して
雑誌なんかも多いかもしれません。
特に消費者に伝えたい情報は、「編集長のおすすめPOINT!」や「便利POINT!」などで他と区別をした打ち出し方をするといいと思います。
商品の最大の特徴なんかをこのやり方で打ち出してみてもいいかもしれませんね。
この時注意しなければいけないのは、「他とは違う特別な情報」なので、デザインでしっかり魅せられるにするということです。
決めポーズはもうやめよう
ファッション系などの場合、モデルさんは必要不可欠ですよね。
ポージングなど色々考えるのだと思いますが、決めポーズはハッキリ言って商品を魅力的にはしません。
消費者が見たいのは、商品を実際に使用したらどんな感じなのか?使い勝手はいいのか?質感は?どうやって見えるの?などです。
それなら効果的なのはやはり仕様風景や商品を着用して生活している場面だと思います。
ファッション系なら街中を歩いてみたり、カフェでお茶してみたりが極自然でイメージがしやすいと思います。
最後に
カタログを参考にして、ECサイトで活用できるような部分ご紹介してきました。
上記はあくまでデザイン的な部分をご紹介しましたが、梱包やパッケージをグレードアップさせたり、メッセージカードを同封して少しでも気持ちよく受け取ってもらえるようにと様々な工夫を施されている企業も見られました。
凝れば凝るほど載せたいものややりたい事は増えてきますよね。
今回カタログを調べていて、やはり文字・画像・図などの情報のバランスは大切だと感じました。
今はSNSやブログなどもあるので、こだわりなんかはそっちで公開するなどして活用するのも手ですね。
WEB制作
ECサイト作成はテンプレート?それとも依頼?両者のメリット・デメリットをまとめました!
TVでやっているいわゆる「懐メロ」を聞くとテンションが上がってしまうのですが、よくよく考えると私の世代ではなかったりするんですよね。みっしぇるです!こんにちは!
ECサイトを制作するにあたって、やり方は人それぞれ様々です。
ショップの出店場所やデザイン・構成、宣伝方法などそれぞれ何通りも方法はあります。
その何通りもあるものの中から選んでいって自分のサイトを作っていくわけですが、まず最初にぶつかる壁は「デザイン」ですよね。
サイトのデザインをするには、「自分で作る」・「制作会社さんに依頼」・「テンプレートを使う」の3通りがあります。
サイト制作に関する知識や技術があれば、自分で作る方が制作費もかかりませんし自由に作れるので文句なしですよね。ですが、思い通りにするにはそれ相応の知識が必要なので、ちょっとかじった程度では中々難しい部分があります。
その場合はやはり制作会社さんに頼るかテンプレートを使用するかの2択になってしまうのですが、当然のことながらどちらもメリット・デメリットがあります。
今回はこれからECサイトを作ろうとしている方のために、テンプレートと依頼のメリット・デメリットをまとめてみました。
制作会社さんに依頼するパターン
サイト制作に関する知識はもちろん技術があるので安心して任せられます。
中にはECサイトを得意とする会社さんもあるので、見た目が綺麗なだけではなく今後の運営がしやすいように考慮されたものが期待できるかもしれません。
メリット
運営者側にデザインに関する知識がなかったとしても、プロですから!こちらの要望をまとめて形にしてもらうことができます。
「オリジナリティが欲しい」や「デザイン性の高さも売りにしたい」などのこだわりがある方にもおすすめです。
テンプレートだと他とかぶる恐れがあるところを、制作会社さんに依頼すれば世界でオンリーワンのあなただけのデザインが手に入ります。
デメリット
プロに依頼するのですから、当然費用がかかります。
会社によってかかる費用はそれぞれなので明確な数字は中々出せないですが、少なくともちょっとの出費で済ませたいのであれば、制作会社に依頼するのは不向きのように思います。
プラン制のところもありますが、制作日数で費用が変わってくる場合は、ミーティングや修正が重なり結局100万になってしまったというケースもあるそうです。
これは極端な例にせよ、他にもレスポンシブ対応やスマホサイト制作、ロゴ制作などオプションも追加すればするほど費用はかさみます。
「どうしてもデザインは妥協できない!」というこだわりをお持ちであればいいのですが、予算的に厳しいのであれば別の方法を探した方がいいかもしれません。
デザインテンプレートを使用するパターン
EC-CUBE
楽天市場やEC-CUBEなど、出店手段によりますが、ものによっては無料のものが複数用意されており、もうちょっとこだわりたいという方には有料のテンプレートが用意されています。
通販で商品を購入するときと同様に購入し、「適応」ボタンなどをぽちっと押すだけで自身のサイトにデザインが反映されます。
メリット
初期設定で使われているデザインだとつまらないでしょうから、少しでも変えたい!という方や、ここでたくさんお金を費やすより他にお金を使いたいという方におすすめです!
だからといって、プロもしくはプロ相当の方が制作されているのでデザイン面での心配はないかと思います。
種類も豊富に用意されていて、かわいい・かっこいいなどのカテゴリの中から選ぶことができるものもありますので、すべて思い通りにとまではいきませんが好みのものを選ぶことが可能です。
デメリット
やはりテンプレートですから、自分の好みにガッチリはまるものが見つからない場合もあります。
この部分だけデザインを変えたい!といっても形が決まってしまっていますし、知識が少しあれば自分でいじることもできるかもしれませんげ、制作者側の規定で加工や編集を禁止している場合もあります。
やはり費用はほかにまわすことができますが、その点あまり自由にはできないのが欠点ですね。
まとめ
制作会社に依頼するのもデザインテンプレートを使用するのも、両者ともに魅力的な個所はたくさんあります。デザインテンプレートをまず見て、好きなものがあれば予算が許す限り制作会社に依頼する方もいらっしゃるみたいです。
オリジナリティを求める方はもう最初から制作会社さんか自身で制作するなり、最初はテンプレートにして余裕が出て来たら制作会社にお願いするという流れでもいいかもしれませんね!
今回の両者のメリット・デメリットを参考にして頂いて、ECサイト制作に役立てて頂ければと思います!
ではこのへんで。みっしぇるでした。
WEB制作
【色で見る!】美しいデザインが魅力的なECサイト5選!【ブルー編】
こんにちは、徐々に春を感じられるようになって、鼻がムズムズする日が増えてきた相馬です。
春は花粉症患者にとって一年で一番憂鬱な時期。春を飛び越えて夏にならないものか。
花粉症で鼻がぐしゃぐしゃになり、どんどん顔が青くなっていきます・・・。
ということで、今回は青に焦点を当てました。
商品の魅力を伝えるためにも、ECサイトにとって見た目は重要な要素のひとつです。
そこで今回から不定期で、デザインが魅力的なECサイトをカラー別でご紹介していきます。
第一回名はブルー。
青色からイメージするキーワードは爽やか、クール、男性的といったものを連想しますが、やっぱりそのようなサイトが並ぶんでしょうか?
ブルーが映える、美しいデザインのECサイト5選
ベンワークウェア
ベンワークウェア
さわやかな青色を差し色にした白ベースのデザインの作業服を販売するECサイト。
キャッチーなイラストやロゴと、爽やかなブルーが随所に散りばめられており、作業服のどこか野暮ったい印象を覆し、逆にオシャレなイメージさえあります。
青といえば男性向けなイメージですが、このサイトは男性向けというよりも女性も惹きつけそうです。
フェイスマスク ルルルン
フェイスマスク ルルルン
女性向けのフェイスマスクのECサイト。
一切のムダがない、美しいミニマムなグリッドデザインです。商品紹介動画などの商品ページ以外のコンテンツも充実していて、是非参考にしたいサイトですね。
このサイトの青といってもちょっと緑がかった淡いブルー。淡い色は、女性が好む傾向があります。
タカミ公式通販
タカミ公式通販
化粧品のECサイト。
これまた落ち着いた美しいサイト。商品のカラーを活かした濃いブルーが落ち着いた印象を与えます。
見た目の美しさはもちろんですが、製品ラインナップをスキンケアのステップごとに並べるという工夫が。
買った時のイメージがしやすくて、ユーザーにとってとても使いやすいサイトです。
三英美術
三英美術
画材のECサイトらしく、カラフルな要素を盛り込んでいても、ポイントポイントで使用されているスカイブルーが爽やかなデザイン。
テーマカラーの使用量が少なくても、そのカラーを使用する場所や配色でしっかりと印象を与えることができるという好例です。
背景に使われている画材の大きな写真の、インパクトがありつつバランスの良い配置がとてもオシャレですね。
Artvolver
Artvolver
原色に近い青が映える、アーティストのオリジナル商品を購入できる海外のECサイト。
日本人からすると実に海外サイトらしい、一捻りあるデザイン。
インパクトがあって扱いの難しいブルーを、要所要所で上手く使っています。センスの良さを感じるハイレベルなデザイン。
まとめ:ブルーは案外男性的ではないのかも
以上、厳選の青いECサイトを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!