「あなたは感覚派デザイナー？それとも理論派デザイナー？」 このような質問をされると、理論派デザイナーだと答えたくなる理系出身デザイナーのタカハマです、こんにちは。 今回は、そんな理屈っぽい私の大好物である「デザインの要素と原則」をご紹介したいと思います。理論派デザイナーの方はもちろん、感覚派デザイナーの方も知っておいて損はないですよ！ 「デザインの要素と原則」はビジュアルデザイン全般に活用できる Webデザインに限らず、ビジュアルデザインの基礎を学ぶ上で、大変参考になる「デザインの原則」というものがあります。いわゆる「Design elements and principles（デザインの要素と原則）」や「Gestalt principles（ゲシュタルト原則）と言われる原則で、デザインの構成要素や要素同士の関係性が全体に与える影響をまとめたものになります。 調べてみると識者によって分類や

基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ

どうしたらクライアントの納得するデザインにたどり着けるのだろう。と考えたことはありませんか？デザインのフィードバック地獄で苦労したWebデザイナー、ディレクターの方は多いと思いますが、振り回されがちなWebデザイナーの特徴とその対処法について、ケーススタディでまとめてみました。 ■クライアントに振り回されるWebデザイナー/WEBディレクターの特徴 「フィードバック指示を額面通りに受け取ってしまう」 これに尽きます。クライアントはデザインをした事が無い人がほとんどなので、修正指示もデザイン的には正しくない事がかなりの割合であります。 これは映画を観て良かった悪かったは誰にでも評価できるが、その映画をどのように修正したらよりよくなるかは経験を積んだ者にしかわからない、というのと同じことです。 にもかかわらず、「ここのボタンを赤くしてください」、「背景をグレーにしてください」という指示を額面通

こんにちは、デザイナーの王です。 みなさんは写真やイラストを見たときに、「色使いうまいな！　どういう色構成をしているんだろう？」と思ったことがあるのではないでしょうか？　デザイナーなら誰しもそう思ったことはあると思います。 プロなら肉眼でもぴんとくるかもしれませんが、もっと正確に色構成を確認したい場合もあると思います。例えば、イラストなら最初から配色はできても、写真ではそれが難しいですよね。そこで色構成をチェックをすれば、より理想に近い配色に直すこともできるかもしれません。また、単に配色を確認して色使いを学ぶこともできますよね。 今回はそんな望みを簡単に叶えてくれる、Photoshopのあまり知られていないが意外と便利な機能をご紹介します。 やりかた 今回はこちらの写真を例に使います。 Step 1 「ファイル」から「web用に保存」を選択します。 ※ショートカットはcommand + a

反響道 - 儲けるポスティング／集客は地域のお客様からはじめよう！筆者の戯言 全国各地で『地域集客』『商売繁盛』のセミナー【反響塾】開催中！！チラシ、ポスティング、サンキューレターやニュースレターなど「アナログ集客」でお客様に愛されるお店（会社）づくりのお話をしております。　著書：儲けるポスティング損するポスティング、集客は「地域のお客様」からはじめよう！ 昨日は新潟にて反響塾でした！ 参加いただきました皆さま並びに ご協力を賜りました皆さま、本当にありがとうございました！！ 特に今回は開食倶楽部すず季さんにて開催させて頂いたため、 ご主人にはとてもお世話になりました。 また「よしだカイロ」の吉田涼くんや イヤローブの岩沢夫妻にも心から感謝！！ あなた達が居たからこそ、 セミナーの開催が出来たんですもの…！ 人はその時々やタイミングで ご縁やチャンス、原因と結果を手にしながら 人生と言う時

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. インターネットをビジネスに活用することが当たり前になり、競合他社がひしめく現在のWEB市場において、WEBデザインは以前よりも遥かに重要性を増している。 なぜなら、WEBデザインそのものが、コンバージョンを大きく左右する要素の１つとなっているからだ。 しかし、デザイン的に素晴らしいスキルを持っているデザイナーは数多くいるが、デザインとコンバージョンの双方にフォーカスしているデザイナーはまだまだ少ないように思う。 そこで、本日は、私自身の経験から、WEBデザイナーの方にも身につけておいて欲しい、コンバージョンを生むためのWEBデザインの考え方をシェアさせて頂こうと思う。 それでは、早速始めよう。 また、私たちバズ部は12年で400社以上のメ

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. ランディングページのデザインにおいて、サイトの色彩は非常に大きな要素だ。 例えば、見込み客の嗜好やブランドイメージと合わない色をメインカラーにすると、それだけでコンバージョンは大幅に下がる。 少し想像してみて欲しい。例えば、このブログの背景が黒一色で、あなたが今読んでいるこの文字がまっ黄色だったらどう思うだろうか？どれだけ役に立つことが書いてあっても、何となく嫌悪感を感じるはずだ。 また、例えば、Amazonのサイト内の購入ボタンが真っ黒だとしたらどうだろうか？購入意欲が下がることは間違いないだろう。 ここまで極端ではないにしろ、ランディングページやサイトの色彩の選択を間違えると、コンバージョンが下がるということは実感して頂けたと思う。

昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ

#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord

概要 ▶ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。それは本文組にWebフォントを使用して、Windowsのウェブブラ 様々なフォントがWebで利用できるモリサワのWebフォントサービス《TypeSquare》が話題になっていますね。 TypeSquare [タイプスクウェア] 2012年12月末まで無料で利用できるので、Web業界の人や印刷業界の人が試しているようです。 しかし、この Webフォントサービス、試した方からは意外に不評の声もちらほら…。 それは本文組にWebフォントを使用して、Windo

WEBデザインしていて、ちょっとモチベーションが上がらないときなんかに、先人たちのデザインについての洞察を読むと、「デザインってそういうことだったのか」とか、「初心だけど忘れてるねー」とか、小さいですが、そんなところからモチベーション、インスピレーションを分けてもらえることがあります。 この記事では、そんな名言、格言を Web Design Mash, Design Was Here とその他のサイトからピックアップして翻訳しました。 毎日少しずつインスピレーションを取り入れるのに役立てて下さい！ 更新: 2011-12-23 誤訳を2点修正しました。※1の箇所です。また、他何点か分かりにくい表現を見直しました。 初出: 2011-12-20 良いデザインは他のデザイナーに無力感を味わわせるものです。なぜならそれは、彼らにはなかった、その人だけのアイデアだからです。 Good design

ブログにしてもサイトにしても同じ事が言えますが、サイトのコンテンツで一番読むのは文章です。なので我々作り手も文章の可読性に関してはしっかり考えたいなというところです。 Index 1.文章の可読性とは？ 2.文章のブロック・段落 3.行間 4.余白 5.テンポ・リズム 6.フォントについて 1.文章の可読性とは？ 当たり前なことですが文章の可読性とはつまり「読みやすさ」です。文字が小さすぎたり、背景色に近い文字だったりすると当然可読性は落ちますね。 コンテンツに記述されていることが優れていても、文章が読みづらそうといった先入観や、読んでいて読みづらいという認識を持つとそのサイトに対してどう思うでしょうか？ 文字のサイズが小さいだけならブラウザのサイズを変更して読んでくれるかも知れませんが、他のサイトへ離脱してしまう可能性は十分に考えられます。人はストレスを感じることを嫌がりますのでよっぽど