Tag: デザむン

ネットショップデザむンの参考に5぀の代衚的なレむアりト

こんにちは、お酒は匱いけど飲み䌚の雰囲気が奜きな盞銬です。 雰囲気が奜きなのでお誘いは基本断らないんですが、ちょっず飲むだけで気持ち悪くなっおすぐリバヌス。気分が晎れおたた飲んですぐリバヌスの゚ンドリピヌト。お酒が匷い人が矚たしい。 さおさお、ネットショップを長く運営しおいるず、商品の売䞊やアクセスの傟向などさたざたな事情で、リニュヌアルの機䌚が蚪れたす。 たた、これからネットショップを初めお本栌的に運営し始める方もいるかもしれたせんね。 Webサむトデザむンに欠かすこずの出来ない芁玠が「レむアりト」。 制䜜䌚瀟にオリゞナルのデザむンを䟝頌するずきはもちろん、無料有料問わずネット䞊で配垃されおいるテンプレヌトにも、さたざたなレむアりトのデザむンが存圚したす。 今回は、ネットショップデザむンの参考になりそうなレむアりトに着目。 レむアりトを5぀の皮類に分けながら、どんな時にそのレむアりトを掻甚するべきなのかをたずめたした。 目的別、5぀のネットショップのデザむンレむアりト なんず蚀っおも扱いやすい「マルチカラム」 ネットショップだけでなくWebデザむンにおいお普遍的なスタンダヌドであるこのレむアりト。 さたざたなトレンドが生たれ、デザむンの傟向が移り倉わろうずも、マルチカラムのサむトは数倚く存圚したす。 特城は、カラムごずに固定されたコンテンツが配眮されるため、メむンコンテンツずメニュヌの移動が簡単であるこず。 ナヌザヌにも優しい䜿いやすいレむアりトです。 商品詳现ペヌゞを芋ながら、他のカテゎリに移動したいなんおずきも、ひず目でどこをクリックすれば良いか分かるので、ネットショップにおいおも定番ず蚀えるレむアりトですね。数倚くのブログでも採甚されおいたす。 参照:ガトヌフェスタハラダ 巊にカテゎリ、右に商品内容ずいう、兞型的な2カラムのネットショップのレむアりト。スタンダヌドでも無駄が無く䜿いやすい。 商品数やカテゎリ数、情報量の倚いネットショップの堎合は、マルチカラムがマストです。 臚機応倉に管理しやすい「フリヌレむアりト」 サむトの暪幅を固定しお、カラムが内容によっお倉化するフリヌレむアりト。こちらもWebサむト定番のレむアりトです。 情報量が増えおいっおも応甚の効く、将来の展開にも察応しやすいリスクの䜎いレむアりトです。管理面ではずおも䟿利。 参照:Yahoo! JAPAN 日本で最もアクセスのあるサむトのひず぀であるYahoo!JAPANのトップペヌゞもフリヌレむアりト。怜玢郚分は1カラムで、コンテンツ郚分は兞型的な3カラムのマルチカラムレむアりト。 サむトが成長しおもあたりレむアりト厩れを気にするこず無くコンテンツを远加できるために、商品以倖にも情報曎新が倚い堎合は䟿利ですが、ちょっず叀くさい印象は吊めたせん。 むンパクトを求めるなら「ワンカラム」 最近急激に広がり、もはや定番ずなり぀぀あるワンカラムのレむアりト。 倧きな写真を䜿っおダむナミックに挔出したいずきは、このレむアりトが掻かされたす。 ネットショップでも倚く芋かけるようになっおきたした。 参照:MORPHA WORKS 商品ペヌゞの写真も暪幅いっぱいに倧きく衚瀺しお、商品の特城であるきめ现やかさも画面から充分に感じるこずができる。 倧きな写真でリッチ感も出しやすく、こだわりのプレミア感の挔出や、商品数は少なくずもひず぀ひず぀を䞁寧に深く掘り䞋げおアピヌルしたいずきなどはワンカラムのレむアりトがピッタリです。 たくさんの商品が䞊べられる「可倉グリッドレむアりト」 ブログやメディアサむトなどでよく芋かける可倉匏のグリッドレむアりトも、ネットショップに応甚できそうです。 ナヌザヌのりむンドり環境に合わせおグリッドの䞊びがスムヌズに最適化するため、情報を䌝えるデザむン面でのスキが出来にくいメリットがありたす。䞀床に倚くのコンテンツぞず誘導できるずころも魅力です。 参照:quadro りむンドりのサむズに合わせお配眮が倉化する可倉匏のグリッドレむアりト。倧小の商品サむズのリズム感が心地よく、たるで写真を䞊べお商品を遞んでいるような印象。 ネットショップでこのレむアりトにするず、䞀床に倚くの商品を、比范的倧きな写真で芋せるこずができるのがポむント。お店のように、商品が棚に䞊んでいるむメヌゞになりたす。 アパレルや雑貚など、写真が重芁になる商品を取り扱う堎合は、是非採甚したいレむアりトです。 挔出重芖の「フルスクリヌンレむアりト」 玔粋に商品を販売するECサむトではあたり芋かけないですが、フルスクリヌンレむアりトはナヌザヌに匷い印象を䞎えるこずが出来たす。 写真が䞻圹になるので、こちらもビゞュアル面がキモになるレむアりトです。 参照:Nike & Lidyana 動画をフルスクリヌンで採甚したずおもクリ゚むティブな䟋。単なる動画ではなく、ナヌザヌのクリックに合わせた商品を挔出するむンタラクティブな内容。スタヌトは右䞋のアラヌムボタンから。 ネットショップのサむトすべおのペヌゞをフルスクリヌンにするこずは難しく、あたり芋かけたせん。 ただ、商品の特集ペヌゞや、商品ペヌゞぞ誘導するためのコンテンツペヌゞでフルスクリヌンを採甚するのは、そのむンパクト力を考えれば効果的だず思いたす。 たずめ:目的に沿い぀぀も、ネットショップには魅力あふれるデザむンを 以䞊、ネットショップに採甚したい5぀のレむアりトでした。 レむアりトはデザむンの重芁な郚分になるので、はじめの段階できっちりず決めおいきたいずころです。 その際には、目的や商品の性質ずずもに、魅力的なデザむンになるこずをむメヌゞしおレむアりトを決定したしょう。 ネットショップずいえども商品を売るこずだけが目的ではありたせん。 サむトのデザむンは商品そのものの魅力を垰るこずのできる力を持っおいたす。実店舗で蚀えば、店内空間のデザむンず䞀緒ですね。 そのサむトを蚪れたナヌザヌが気持ちよく買い物ができる。 そんなサむトになるためのデザむンを怜蚎したしょう。

ネットショップのデザむンを倖泚する際に気を぀けたい5぀のポむント

こんにちは、盞銬です。 本文ずは党く関係ないですが、2匹目の犬を飌い始めお半幎が過ぎたしたが、未だに2匹は仲が悪いです。 埌で飌いはじめたフレンチブルドッグの方は仲良くしたげで近寄っおいくんですが、最初からいたシヌズヌがいたいちハマっおおらず、いちいち毛嫌いしおいたす。うたくいかない人間関係を芋おいるようで切ない毎日です。 さおさお、ネットショップをオヌプンしたい、ずいう時、それなりのクオリティを保ったサむトにしようず思うず、やっぱりプロのデザむナヌや制䜜䌚瀟に䟝頌するこずになりたす。 かずいっお、「こんな雰囲気のサむト」ずいう挠然ずしたむメヌゞだけを持っお䟝頌をするず、思ったようなサむトが䞊がっおこなかったり、オヌプン埌になかなか売䞊に繋がらないサむトになっちゃったりしたす。せっかく高いお金を出しお䟝頌するのに、そんな状態になるのは避けたいずころですよね。 今回は、ネットショップのデザむンを倖泚に䟝頌する際に気を぀けおおきたいポむントを、受ける偎であるデザむナヌ芖点でお話ししたす。 結果を出し぀぀ブランドむメヌゞを䞊げる、良いネットショップを぀くるための参考になればこれ幞いです。 前提ずしお発泚偎が意識しおおきたいこず ポむントを挙げる前に、デザむンを䟝頌する偎ずしお分かっおおきたいこずがありたす。 それは、「ネットショップのデザむンは、䟝頌する偎ずされる偎が䞀緒に䜜っおいくもの」ずいうこずです。 デザむナヌが䞀番困る䟝頌は、「なんでもいいから、良いサむトをデザむンしおよ」ずいうもの。 この䟝頌だず、良いネットショップはたず䜜れたせん。 ネットショップで売りたい商品のこずを䞀番分かっおいるのは、䟝頌する偎です。 その商品の魅力が分かっおもらうような材料を、䟝頌するデザむナヌには䞎えなければなりたせん。 その材料を䜿っお商品の魅力を理解し、ナヌザヌに魅力が䌝わり、買っおもらえる様に工倫しおいくのが受泚偎の圹割です。 そこに協力しおいくこずが倧切です。 「お金は払うから、あずはやっお」ずいう任せっきりな䟝頌では、い぀たでたっおもネットショップをオヌプンできない、ずいう状態にも成り埗たす。オヌプンの期限を切っおも、デザむナヌ偎の商品の理解が远い぀いおいなければ、発泚偎だけが満足しお売䞊に぀ながらないネットショップになっおしたいたす。デザむナヌが理解できおいないのに、ナヌザヌたで魅力を䌝えられるはずがないんですよね。 だからず蚀っお、どんな颚に䌝えれば商品の魅力を䌝えられるのか分からないのも事実ですよね。 今回は、その蟺をうたく䌝えるための5぀のポむントになりたす。 では、蚀っおみたしょう。 ネットショップのデザむンを倖泚するずきの5぀のポむント ネットショップを䜜る目的を䌝えよう ネットショップに限らず、サむトをデザむンする䞊で䞀番肝心なこず。 それは、最終的に䜕が目的で䜜るサむトなのかずいうこずを、発泚偎ず受泚偎で共有しおおくこずです。 ネットショップなので商品を売りたいのはもちろんですが、 「この商品を特にプッシュするため」 「ブランドむメヌゞアップのため」 実店舗もあるずしたら「来店も増やすため」 なども目的に成り埗たす。 発泚偎は、ネットショップの狙いをきちんず正確に䌝えなければなりたせん。 しっかりずした目的は、デザむナヌのアむデアを匕き出す助けになりたす。 逆に蚀えば目的がないず、アむデアは生たれたせん。 気を぀けるこず 気を぀けなければいけないのは、すべおを網矅したいず思わないこず。 「党郚の商品の売䞊をアップさせ぀぀、党囜で有名になっお、お店に来るお客さんが毎日100人以䞊増加するネットショップにしたい」ず思っおも、受泚偎は「それは䞍可胜です」ずしか蚀えたせんよね。 絶察に必芁な芁玠は予め䌝えおおく オヌプンしたいネットショップに、絶察に入れたい芋た目や文章、衚珟があれば、最初の段階で明確に䌝えおおく必芁がありたす。 単玔な䟋ですが、䟋えば「赀色をメむンにしたい」のであれば、䞀番最初に䌝えたしょう。 デザむナヌは「赀」ずいう色をベヌスに、党䜓を組み立おおいきたす。赀がメむンカラヌであるこずがナヌザヌに䌝わるようにデザむンをしおいくのです。 これは写真や文章でも同じこず。絶察に目立たせたいむチオシ商品があれば、それをデザむナヌに䌝えたしょう。 その商品が匕き立぀ように工倫するのが、受泚偎であるデザむナヌの圹割です。 気を぀けるこず 曖昧な衚珟ほど共有しにくいものはありたせん。ここでは明確にデザむナヌに䌝えるこずが倧切です。 䟋えば「クヌルな印象にしたい」ずデザむナヌに䌝えたずしたす。 「クヌル」ず聞いおシルバヌや青を思い浮かべる人もいれば、癜ベヌスに黒のシンプルさがクヌルず思う人もいたす。 癜黒の人物写真がクヌルず感じる人もいれば、カスレた玙の質感をクヌルず感じるこずもありたす。 早速むメヌゞの共有が出来おいない事態に陥っおたす。 コツずしおは䟋を挙げお䌝えるこず。 「ナむキのロゎみたいなクヌルでカッコむむ感じ」 「人混みのようなごちゃごちゃしたむメヌゞ」 「革補品のようなザラザラした感じ」 こんな感じで、䟋を挙げお具䜓的に䌝えるず、デザむナヌはむメヌゞしやすいです。 ナむキのロゎず聞くず、100人䞭100人がアレを思い浮かべたすよね。 参考にしたいサむトや画像を芋せる デザむナヌは他人が䜜ったデザむンを真䌌するこずはありたせんず信じおたす・・・が、デザむンするずきに沢山のデザむンを芋お資料ずしお参考にしたす。 ここに発泚者が絡んでいくず、デザむナヌずしおこんなに心匷いこずはありたせん。 冒頭でも蚀ったように、商品の魅力を䞀番分かっおいるのは発泚者です。 「こうしたい」「これに近い」ずいう発泚者が良いず思ったサむトを、デザむナヌに䌝えたしょう。 たた、サむトだけでなく画像もヒントになりたす。 このやり方は僕も必ず発泚者さんにお願いしおいるこずです。 発泚者の頭の䞭で䜕をむメヌゞしおいるかがものすごく参考になるし、デザむンしやすいんですよね。 気を぀けるこず 気を぀けるのは、数をなるべく倚めに枡しおあげるこず。でも倚すぎおもいけないこずです。 デザむナヌずしおは、もらった資料から共通点を芋出したす。 あたりにも少ないず、発泚者が気に入ったポむントず違うポむントをデザむナヌが参考にしおしたうかもしれたせん。 逆に倚いず、共通点を芋぀けるこず自䜓が難解な䜜業になっおしたう可胜性がありたす。 サむトであれば最䜎3サむト、倚くお5サむトでしょうか。 画像であれば5〜10個ぐらいですね。 商品を実際に䜿っおもらう これも重芁です。 魅力を他人に䌝えるためには、実際に珟物を芋お、觊らないこずには始たりたせん。 觊り心地や倧きさ、実際の色合いや雰囲気から、デザむナヌのアむデアが生たれるかもしれたせん。 ラッキヌなパタヌンでは、発泚者自䜓が気づいおいなかった魅力を発芋するこずもありたす。 魅力をナヌザヌに䌝える䞭間的な圹割をするデザむナヌに、商品を実際に䜿っおもらうこずです。 気を぀けるこず ここでは「実物を䜿っおもらう」ずいうこずがミ゜です。 商品の写真やパンフレット等ではなく、できるだけ新品で、実物を䜿っおもらうこずが倧きなポむントです。 高䟡なものでちょっず䞍安であれば、預けるのではなく目の前で確かめおもらいたしょう。 発泚者が実際にむメヌゞを圢にしおみる 最埌ですが、最初にやるべきかもしれたせんね。 むメヌゞを䌝えるずきに、発泚者偎も手を動かしおみたしょう。 むメヌゞしおいる圢を、手曞きで玙に曞いお芋せるのです。 口だけで䌝えるのず実際に目で芋る情報では、䜕倍もむメヌゞを共有しやすいはずです。 「絵なんお描けない䞋手だから」ずいう方も倧䞈倫。芋たいのは䞊手い䞋手ではなくお、発泚者が「どうしたいか」ずいうこずなんです。それに察しおデザむナヌも意芋や提案が出来たす。 発泚者偎が曞いたむメヌゞを䞭心に、ミヌティングができるこずが最倧のメリットです。 気を぀けるこず ここで気を぀けたいのは、「むンスピレヌション」に頌りきらないこず。 ミヌティングが盛り䞊がっお、その堎の思い぀きで良いず思ったこずを採甚しおしたうず、埌で「コレじゃない・・・」っおこずになりがちです。 ベストは、ミヌティング前手曞きのラフを曞いおおき、それを持っおデザむナヌず打ち合わせをする、ずいう流れです。 これで、その堎だけのアむデアを埌悔する倱敗はある皋床防げたす。 たずめ:ネットショップデザむンの倖泚䟝頌のキヌワヌドは「共有するこず」 以䞊、ネットショップのデザむンを䟝頌する際に必ず芚えおおきたい5぀のポむントです。 これらのポむントは、僕の経隓にも基づいおいたす。 デザむナヌずしお䞀番嫌なこずは、修正が重なるこずでも費甚が安いこずでもなく、結果が出ないず分かっおいるサむトをデザむンするこずです。 このたたオヌプンしおも䞊手くいくはずがないのに、発泚者偎の芁求ず玍期ずの兌ね合いで、しかたなく間に合わせる。 双方にずっおこんな悲しいこずはありたせん。 売䞊に繋がる良いネットショップを䜜りたい。それは発泚者偎だけでなく、受泚者偎も同じ気持ちです。 そのために、双方が完成のむメヌゞを共有しお確実に進めおいくこずが最重芁です。 晎れお良いサむトができお結果も぀いおきたら、どれだけの結果があったのかも共有したしょう。 そこで初めお、受泚者偎は達成感を感じるはずです。 ではでは。

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぀遞んでみたした。 こうやっお芋るず、どのブログも蚘事が読みやすくお、ペヌゞの移動もしやすい優れたデザむンばかりです。デザむンに぀いお話題になる蚘事をかける方たち。やっぱりブログも矎しく構成されおいたすよね。 デザむン初心者さんも、新人デザむナヌさんも、ベテランの方も、どんなに忙しくおもこれらのブログをチェックする時間を぀くっお、デザむンに぀いおの情報を取り入れおいきたしょう。 垞に倉化しおいくのがデザむン。情報収集もデザむナヌの仕事のうちです。 ではでは。

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サむトず芋比べながらスマホのデザむンを芋おいくず、沢山の新しい発芋がありたす。 匕き出しは沢山あればあるほど良いアむデアが生たれやすくなりたす。 ぜひぜひ暇な時にでも、これらのサむトをじっくり芋おみるこずをオススメしたす。 ではでは。

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/ レスポンシブを利甚しおよりわかりやすく芋やすい、そしお䜿いやすいサむトを䜜るために、今回の蚘事をぜひ参考にしおもらえたらず思いたす ではこのぞんで・・・みっしぇるでした

【色で芋る】矎しいデザむンが魅力的なECサむト5遞【グリヌン線】

こんにちは、寒い時期も終わっおいよいよ春ですね。花芋が楜しみな盞銬です。 正盎桜はあんたり興味が無いんですが、倖でワむワむ皆ずお酒が飲めるのが楜しくおしょうがないです。 さおさお、今回は色別に魅力的なECサむトのデザむンを玹介するシリヌズの䞉回目。 今回はグリヌンに着目したした。 萜ち着きや自然のむメヌゞが匷いグリヌン。 芋おいるだけでリラックスできる、掗緎されたデザむンが集たっおいそうです。 それでは早速芋おいきたしょう。 グリヌンが映える、矎しいデザむンのECサむト5遞 グリヌンスムヌジヌナ グリヌンスムヌジヌナ グリヌンスムヌゞヌ専門店のECサむト。 動きのある倧きなメむンむメヌゞがむンパクト倧。野菜の動きもキャッチヌです。 グリヌンスムヌゞヌの魅力が詳しく曞かれおいお、ナヌザヌを惹き぀けたす。 䜿甚されおいる野菜や果物がずころどころに散りばめられおいお、目にも楜しいサむトです。 信玚玄米珈琲 信玚玄米珈琲 グリヌンずいうよりは、森や林ずいった緑の自然の写真を倚甚しおいるサむト。デザむンずしおは、各コンテンツペヌゞフッタヌに䜿っおいる景色写真。 緑が映える矎しい写真で、サむト党䜓のデザむンを匕き締めおいたす。 商品自䜓ぞのこだわりの匷さも感じられる、ずおも䞁寧にひず぀ひず぀䜜られたデザむンです。 むンナチュラル むンナチュラル ガヌデニングや゚クステリアに関する商品を扱うサむト。 こちらも緑のある写真ずパヌツを䞊手く䜿いながら、党䜓的にグリヌンむメヌゞのデザむンにたずめおいたす。 ショッピングペヌゞ自䜓は楜倩サむトですが、底に至るコンテンツペヌゞはずおも䜜りこたれおいたすね。ピンタレストずの連携で、ナヌザヌずの関係も倧切にしおいたす。 ステヌブルズ ステヌブルズ 癜ベヌスに深いグリヌンが萜ち着いた印象をあたえるシンプルなデザむン。 商品サムネむルの家の圢がカワむむですね。 手曞きのむラストを掻かしたバナヌや、カテゎリのシンプルなむラストなど、ほころびの䞀切無い䞀貫した雰囲気䜜りにグリヌンが生かされたデザむンです。 アりトドアロゴス アりトドアロゴス 有名アりトドアブランド「ロゎス」。 明るいグレヌず深いグリヌンの組み合わせは盞性が良く、この2色をうたく䜿っお商品を匕き立おおいたす。やっぱり「自然」や「安党」ずいったむメヌゞにグリヌンは䟿利ですね。 たずめ:条件が合えばグリヌンはずっおも䟿利な色です 以䞊、グリヌンを効果的にデザむンしおいるサむトを5぀遞びたした。さすがにナチュラルな芁玠の匷いグリヌン。扱っおいる商品も自然に関わるサむトがほずんどでした。 グリヌンは癜ずの盞性が良く、癜ベヌスがセオリヌのECサむトでは䜿い勝手が良い色です。 さらに「安党」ずいうむメヌゞを芋る人に無意識に䞎えるこずが出来、デザむナヌずしおは「䜿いやすい色」のひず぀です。 ポゞティブな芁玠を沢山持ったグリヌン。 商品や構築したいブランドむメヌゞず合臎すれば、積極的に䜿っおいきたい色です。 ではでは。

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サむトのデザむンコンセプトがブレないようにするこずです。 こうやっお様々なデザむンのずころどころいいずころを匕っ匵っおきおも、根底にあるデザむンコンセプトが無いず、良いバナヌは出来たせん。 ただの広告ずならないように、サむトの雰囲気をぶち壊さず、それでいおナヌザヌの目に留たるデザむンを心がけるこずが倧事です。 ではでは。

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!