Tag: デザイン
EC・ネットショップ
ネットショップデザインの参考に!5つの代表的なレイアウト!
こんにちは、お酒は弱いけど飲み会の雰囲気が好きな相馬です。
雰囲気が好きなのでお誘いは基本断らないんですが、ちょっと飲むだけで気持ち悪くなってすぐリバース。気分が晴れてまた飲んですぐリバースのエンドリピート。お酒が強い人が羨ましい。
さてさて、ネットショップを長く運営していると、商品の売上やアクセスの傾向などさまざまな事情で、リニューアルの機会が訪れます。
また、これからネットショップを初めて本格的に運営し始める方もいるかもしれませんね。
Webサイトデザインに欠かすことの出来ない要素が「レイアウト」。
制作会社にオリジナルのデザインを依頼するときはもちろん、無料有料問わずネット上で配布されているテンプレートにも、さまざまなレイアウトのデザインが存在します。
今回は、ネットショップデザインの参考になりそうなレイアウトに着目。
レイアウトを5つの種類に分けながら、どんな時にそのレイアウトを活用するべきなのかをまとめました。
目的別、5つのネットショップのデザインレイアウト
なんと言っても扱いやすい「マルチカラム」
ネットショップだけでなくWebデザインにおいて普遍的なスタンダードであるこのレイアウト。
さまざまなトレンドが生まれ、デザインの傾向が移り変わろうとも、マルチカラムのサイトは数多く存在します。
特徴は、カラムごとに固定されたコンテンツが配置されるため、メインコンテンツとメニューの移動が簡単であること。
ユーザーにも優しい使いやすいレイアウトです。
商品詳細ページを見ながら、他のカテゴリに移動したいなんてときも、ひと目でどこをクリックすれば良いか分かるので、ネットショップにおいても定番と言えるレイアウトですね。数多くのブログでも採用されています。
参照:ガトーフェスタハラダ
左にカテゴリ、右に商品内容という、典型的な2カラムのネットショップのレイアウト。スタンダードでも無駄が無く使いやすい。
商品数やカテゴリ数、情報量の多いネットショップの場合は、マルチカラムがマストです。
臨機応変に管理しやすい「フリーレイアウト」
サイトの横幅を固定して、カラムが内容によって変化するフリーレイアウト。こちらもWebサイト定番のレイアウトです。
情報量が増えていっても応用の効く、将来の展開にも対応しやすいリスクの低いレイアウトです。管理面ではとても便利。
参照:Yahoo! JAPAN
日本で最もアクセスのあるサイトのひとつであるYahoo!JAPANのトップページもフリーレイアウト。検索部分は1カラムで、コンテンツ部分は典型的な3カラムのマルチカラムレイアウト。
サイトが成長してもあまりレイアウト崩れを気にすること無くコンテンツを追加できるために、商品以外にも情報更新が多い場合は便利ですが、ちょっと古くさい印象は否めません。
インパクトを求めるなら「ワンカラム」
最近急激に広がり、もはや定番となりつつあるワンカラムのレイアウト。
大きな写真を使ってダイナミックに演出したいときは、このレイアウトが活かされます。
ネットショップでも多く見かけるようになってきました。
参照:MORPHA WORKS
商品ページの写真も横幅いっぱいに大きく表示して、商品の特徴であるきめ細やかさも画面から充分に感じることができる。
大きな写真でリッチ感も出しやすく、こだわりのプレミア感の演出や、商品数は少なくともひとつひとつを丁寧に深く掘り下げてアピールしたいときなどはワンカラムのレイアウトがピッタリです。
たくさんの商品が並べられる「可変グリッドレイアウト」
ブログやメディアサイトなどでよく見かける可変式のグリッドレイアウトも、ネットショップに応用できそうです。
ユーザーのウインドウ環境に合わせてグリッドの並びがスムーズに最適化するため、情報を伝えるデザイン面でのスキが出来にくいメリットがあります。一度に多くのコンテンツへと誘導できるところも魅力です。
参照:quadro
ウインドウのサイズに合わせて配置が変化する可変式のグリッドレイアウト。大小の商品サイズのリズム感が心地よく、まるで写真を並べて商品を選んでいるような印象。
ネットショップでこのレイアウトにすると、一度に多くの商品を、比較的大きな写真で見せることができるのがポイント。お店のように、商品が棚に並んでいるイメージになります。
アパレルや雑貨など、写真が重要になる商品を取り扱う場合は、是非採用したいレイアウトです。
演出重視の「フルスクリーンレイアウト」
純粋に商品を販売するECサイトではあまり見かけないですが、フルスクリーンレイアウトはユーザーに強い印象を与えることが出来ます。
写真が主役になるので、こちらもビジュアル面がキモになるレイアウトです。
参照:Nike & Lidyana
動画をフルスクリーンで採用したとてもクリエイティブな例。単なる動画ではなく、ユーザーのクリックに合わせた商品を演出するインタラクティブな内容。スタートは右下のアラームボタンから。
ネットショップのサイトすべてのページをフルスクリーンにすることは難しく、あまり見かけません。
ただ、商品の特集ページや、商品ページへ誘導するためのコンテンツページでフルスクリーンを採用するのは、そのインパクト力を考えれば効果的だと思います。
まとめ:目的に沿いつつも、ネットショップには魅力あふれるデザインを
以上、ネットショップに採用したい5つのレイアウトでした。
レイアウトはデザインの重要な部分になるので、はじめの段階できっちりと決めていきたいところです。
その際には、目的や商品の性質とともに、魅力的なデザインになることをイメージしてレイアウトを決定しましょう。
ネットショップといえども商品を売ることだけが目的ではありません。
サイトのデザインは商品そのものの魅力を帰ることのできる力を持っています。実店舗で言えば、店内空間のデザインと一緒ですね。
そのサイトを訪れたユーザーが気持ちよく買い物ができる。
そんなサイトになるためのデザインを検討しましょう。
EC・ネットショップ
ネットショップのデザインを外注する際に気をつけたい5つのポイント!
こんにちは、相馬です。
本文とは全く関係ないですが、2匹目の犬を飼い始めて半年が過ぎましたが、未だに2匹は仲が悪いです。
後で飼いはじめたフレンチブルドッグの方は仲良くしたげで近寄っていくんですが、最初からいたシーズーがいまいちハマっておらず、いちいち毛嫌いしています。うまくいかない人間関係を見ているようで切ない毎日です。
さてさて、ネットショップをオープンしたい、という時、それなりのクオリティを保ったサイトにしようと思うと、やっぱりプロのデザイナーや制作会社に依頼することになります。
かといって、「こんな雰囲気のサイト」という漠然としたイメージだけを持って依頼をすると、思ったようなサイトが上がってこなかったり、オープン後になかなか売上に繋がらないサイトになっちゃったりします。せっかく高いお金を出して依頼するのに、そんな状態になるのは避けたいところですよね。
今回は、ネットショップのデザインを外注に依頼する際に気をつけておきたいポイントを、受ける側であるデザイナー視点でお話しします。
結果を出しつつブランドイメージを上げる、良いネットショップをつくるための参考になればこれ幸いです。
前提として発注側が意識しておきたいこと
ポイントを挙げる前に、デザインを依頼する側として分かっておきたいことがあります。
それは、「ネットショップのデザインは、依頼する側とされる側が一緒に作っていくもの」ということです。
デザイナーが一番困る依頼は、「なんでもいいから、良いサイトをデザインしてよ」というもの。
この依頼だと、良いネットショップはまず作れません。
ネットショップで売りたい商品のことを一番分かっているのは、依頼する側です。
その商品の魅力が分かってもらうような材料を、依頼するデザイナーには与えなければなりません。
その材料を使って商品の魅力を理解し、ユーザーに魅力が伝わり、買ってもらえる様に工夫していくのが受注側の役割です。
そこに協力していくことが大切です。
「お金は払うから、あとはやって」という任せっきりな依頼では、いつまでたってもネットショップをオープンできない、という状態にも成り得ます。オープンの期限を切っても、デザイナー側の商品の理解が追いついていなければ、発注側だけが満足して売上につながらないネットショップになってしまいます。デザイナーが理解できていないのに、ユーザーまで魅力を伝えられるはずがないんですよね。
だからと言って、どんな風に伝えれば商品の魅力を伝えられるのか分からないのも事実ですよね。
今回は、その辺をうまく伝えるための5つのポイントになります。
では、言ってみましょう。
ネットショップのデザインを外注するときの5つのポイント
ネットショップを作る目的を伝えよう
ネットショップに限らず、サイトをデザインする上で一番肝心なこと。
それは、最終的に何が目的で作るサイトなのかということを、発注側と受注側で共有しておくことです。
ネットショップなので商品を売りたいのはもちろんですが、
「この商品を特にプッシュするため」
「ブランドイメージアップのため」
実店舗もあるとしたら「来店も増やすため」
なども目的に成り得ます。
発注側は、ネットショップの狙いをきちんと正確に伝えなければなりません。
しっかりとした目的は、デザイナーのアイデアを引き出す助けになります。
逆に言えば目的がないと、アイデアは生まれません。
気をつけること
気をつけなければいけないのは、すべてを網羅したいと思わないこと。
「全部の商品の売上をアップさせつつ、全国で有名になって、お店に来るお客さんが毎日100人以上増加するネットショップにしたい」と思っても、受注側は「それは不可能です」としか言えませんよね。
絶対に必要な要素は予め伝えておく
オープンしたいネットショップに、絶対に入れたい見た目や文章、表現があれば、最初の段階で明確に伝えておく必要があります。
単純な例ですが、例えば「赤色をメインにしたい」のであれば、一番最初に伝えましょう。
デザイナーは「赤」という色をベースに、全体を組み立てていきます。赤がメインカラーであることがユーザーに伝わるようにデザインをしていくのです。
これは写真や文章でも同じこと。絶対に目立たせたいイチオシ商品があれば、それをデザイナーに伝えましょう。
その商品が引き立つように工夫するのが、受注側であるデザイナーの役割です。
気をつけること
曖昧な表現ほど共有しにくいものはありません。ここでは明確にデザイナーに伝えることが大切です。
例えば「クールな印象にしたい」とデザイナーに伝えたとします。
「クール」と聞いてシルバーや青を思い浮かべる人もいれば、白ベースに黒のシンプルさがクールと思う人もいます。
白黒の人物写真がクールと感じる人もいれば、カスレた紙の質感をクールと感じることもあります。
早速イメージの共有が出来ていない事態に陥ってます。
コツとしては例を挙げて伝えること。
「ナイキのロゴみたいなクールでカッコイイ感じ」
「人混みのようなごちゃごちゃしたイメージ」
「革製品のようなザラザラした感じ」
こんな感じで、例を挙げて具体的に伝えると、デザイナーはイメージしやすいです。
ナイキのロゴと聞くと、100人中100人がアレを思い浮かべますよね。
参考にしたいサイトや画像を見せる
デザイナーは他人が作ったデザインを真似することはありません(と信じてます・・・)が、デザインするときに沢山のデザインを見て資料として参考にします。
ここに発注者が絡んでいくと、デザイナーとしてこんなに心強いことはありません。
冒頭でも言ったように、商品の魅力を一番分かっているのは発注者です。
「こうしたい」「これに近い」という発注者が良いと思ったサイトを、デザイナーに伝えましょう。
また、サイトだけでなく画像もヒントになります。
このやり方は僕も必ず発注者さんにお願いしていることです。
発注者の頭の中で何をイメージしているかがものすごく参考になるし、デザインしやすいんですよね。
気をつけること
気をつけるのは、数をなるべく多めに渡してあげること。でも多すぎてもいけないことです。
デザイナーとしては、もらった資料から共通点を見出します。
あまりにも少ないと、発注者が気に入ったポイントと違うポイントをデザイナーが参考にしてしまうかもしれません。
逆に多いと、共通点を見つけること自体が難解な作業になってしまう可能性があります。
サイトであれば最低3サイト、多くて5サイトでしょうか。
画像であれば5〜10個ぐらいですね。
商品を実際に使ってもらう
これも重要です。
魅力を他人に伝えるためには、実際に現物を見て、触らないことには始まりません。
触り心地や大きさ、実際の色合いや雰囲気から、デザイナーのアイデアが生まれるかもしれません。
ラッキーなパターンでは、発注者自体が気づいていなかった魅力を発見することもあります。
魅力をユーザーに伝える中間的な役割をするデザイナーに、商品を実際に使ってもらうことです。
気をつけること
ここでは「実物を使ってもらう」ということがミソです。
商品の写真やパンフレット等ではなく、できるだけ新品で、実物を使ってもらうことが大きなポイントです。
高価なものでちょっと不安であれば、預けるのではなく目の前で確かめてもらいましょう。
発注者が実際にイメージを形にしてみる
最後ですが、最初にやるべきかもしれませんね。
イメージを伝えるときに、発注者側も手を動かしてみましょう。
イメージしている形を、手書きで紙に書いて見せるのです。
口だけで伝えるのと実際に目で見る情報では、何倍もイメージを共有しやすいはずです。
「絵なんて描けない!下手だから!」という方も大丈夫。見たいのは上手い下手ではなくて、発注者が「どうしたいか」ということなんです。それに対してデザイナーも意見や提案が出来ます。
発注者側が書いたイメージを中心に、ミーティングができることが最大のメリットです。
気をつけること
ここで気をつけたいのは、「インスピレーション」に頼りきらないこと。
ミーティングが盛り上がって、その場の思いつきで良いと思ったことを採用してしまうと、後で「コレじゃない・・・」ってことになりがちです。
ベストは、ミーティング前手書きのラフを書いておき、それを持ってデザイナーと打ち合わせをする、という流れです。
これで、その場だけのアイデアを後悔する失敗はある程度防げます。
まとめ:ネットショップデザインの外注依頼のキーワードは「共有すること」
以上、ネットショップのデザインを依頼する際に必ず覚えておきたい5つのポイントです。
これらのポイントは、僕の経験にも基づいています。
デザイナーとして一番嫌なことは、修正が重なることでも費用が安いことでもなく、結果が出ないと分かっているサイトをデザインすることです。
このままオープンしても上手くいくはずがないのに、発注者側の要求と納期との兼ね合いで、しかたなく間に合わせる。
双方にとってこんな悲しいことはありません。
売上に繋がる良いネットショップを作りたい。それは発注者側だけでなく、受注者側も同じ気持ちです。
そのために、双方が完成のイメージを共有して確実に進めていくことが最重要です。
晴れて良いサイトができて結果もついてきたら、どれだけの結果があったのかも共有しましょう。
そこで初めて、受注者側は達成感を感じるはずです。
ではでは。
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サイトにも導入したい!レスポンシブデザインの基本とポイントまとめ!
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デザインを成長させていくようですね。
ではでは!
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!