サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
www.color-fortuna.com
ウェブ配色で気をつけたいこと(2017年版) ウェブ配色に必要な要件は、利用される環境やデバイスによって変わってきています。スマートフォンの登場から10年経ち、多くのサイトを見て感じたことをまとめてみました。 ものすごく読みにくいサイトを見つけたので、老害だなぁと感じつつもまだまだ言わないといけないことも多いということで、最近感じているウェブ配色についての大まかな部分をまとめておきます。 各論についてはいろいろあるので、またそれは整理してまとめたいと思います。 色が活かされる場所が減っている けして色の重要度が下がったということではないのですが、モバイルの比率が高くなることによって、色のイメージという点においては、優先順位は下がります。 基本的には色は大きければ大きいほど、そのイメージも心理的効果も強くなるわけですが、大きな画面のデスクトップ用のモニターを使っている人よりも、スマートフォン
本当にダメなホームページの見分け方 ダメなホームページという表現はよく使われますが、本当にダメなのかどうかはなかなか一般の人にはわかりにくいため、リニューアルを考える前にまずここをチェックしてみよう、できるならまず直してみようという記事を書いてみました。 ダメなホームページと言ってもいろいろありますが、今回はリニューアルしようかなとちょっとでも考えている方に向けて書いていきたいと思います。 大前提になるのは「ホームページをなんとかして、ビジネスに活用したい」と思っていることですが、そもそもリニューアルしたい理由は何でしょうか? なんとなくページが古いような気がするからリニューアルしようと言うのであれば、もう少し考えてからにしましょう。 古いこと自体は問題ではなく、古いことで機能が落ちて価値が失われているとか、本当は価値があるのに評価されていないことが問題なのです。 ホームページの価値はつい
ウェブ配色ツールが新しくなりました 1色を作れば自動的に配色を作るツールです。難しいツールではないので、多分使えばわかると思います。この写真も変えることができます。
小規模店舗(飲食店・美容室・エステなど)でのウェブ集客 小規模店舗で予算がないという場合には、ウェブサイトの制作にこだわらず、専門サイトの活用やSNSを上手く使うことで集客などを行うことができます。新規顧客の獲得だけでなく、既存顧客のフォローでリピート期間を短縮できれば、それでも売り上げは上がるはずです。 だいたい従業員1～5人くらいまでのコンパクトなお店を小規模店舗として、今日はそのくらいの規模でのウェブを使った集客・売り上げアップについて考えてみます。 このくらいの規模ですと、まず大きな広告費や制作費、ついでに言うと運用費は掛けられないことがほとんどです。「ミシュランで星をもらってる」「有名なカリスマ美容師がいる」「大阪ではここでしか受けれない施術」のような、突出した何かがあればともかくですが、なかなかそれも難しいでしょう。 となると、初期費用も控えめにして、なおかつ運用の負荷も低くし
CSS Niteの「Shift10:Webデザイン行く年来る年」のデザイントレンドセッションがたった今終わりました。 「坂本の目」の部分で「画像解像度再考」ということでお話させていただきましたが、若干時間が足りないはずなので、ブログで補足しておこうと思います。 海外サイトは解像度が高くてもきちんと見える 今回、デザイントレンドで多くのサイトを見ていて気づいたのは、多くの海外サイトがフルHD(1920x1080ピクセル)以上の解像度の端末で見てもきちんと見えるように作ってあり、それに対して国内のサイトの多くは解像度の高い端末で見ると、文字が小さく読めないというものでした(比べるのがそもそも無理があるのは承知しております)。 実寸で見ていただいた方がわかりやすすいのですが、この画像でも幅1920pxで見た場合と幅1366pxで見た場合では、スケール感も全然違って、高解像度では文字も相当小さく感
ウェブ制作会社の見つけ方 ウェブ制作会社を選ぶ際の効率よく間違いの少ない制作会社を選ぶ方法や考え方についてまとめてみました。検索・知人への依頼・相見積もりサイトなどの方法がありますが、予算や規模・やりたいことによって選び方は大きく変わります。 となんとなく思ったので、Facebookに書き込んだら、予想以上にいろんな人のコメントをいただきまして、しかもそんな都合のいいものはないという結論は見えていたのですが、最初に言い出してしまった者として、私も何か考えてみたいと思います。 ウェブ制作と言っても、数万円から数千万円あるいはそれ以上と、いくらでもあるわけですが、この記事を読む人は超大型案件を依頼しようとは思っていないはずですので、私がよく出会う案件の範囲で、だいたい100万円以下の予算を持っているという前提で書いていきたいと思います。 10万しかないんですけど・・・という方は、一番近くて安い
いよいよ年末を迎えまして、私はこれから買い出しと掃除に励みたいと思いますが、その前に12月26日(土)に開催されたCSS Nite LP43「Webデザイン行く年来る年(Shift9)」に出演してきました。 その時にスマートデバイスセッションで、フォームでエラーが出た場合の表示が、ほとんどピンクの背景であったということで、なぜそうなっているのかという宿題を、まぼろしの松田さんからいただきました。 他に思いつかない・・・ 正直なところ、他に選択肢ないだろうとか、変える理由が見あたらないだろうと思うわけですが、この色がスタンダードになっている理由というのも必ずあるはずですので、セッション中にも回答しましたが、時間が足りなかったのであらためて整理しておきたいと思います。 エラーの表現はいろいろありますが、だいたいこういう感じで入力に不備のある部分がピンクになります。 安全色彩から まず注意や警告
WYSIWYGエディタ嫌いからa-blog cmsの導入へ a-blog cmsに出会ってそろそろ4年くらいになるかと思います。最初に気に入ったところはWYSIWYGエディタを使わずに、きちんとページが作れるということでした。 WYSIWYGエディタはHTMLを作るエディタだと思っているのですが、慣れていない人が使うと、装飾にばかり目がいってしまい、本来やるべきコンテンツの作成がおろそかになってしまうということになりかねません。できるだけそういうお客さんの努力を阻害する要素を減らしたかったんですよね。 もちろんWYSIWYGエディタでもできる人はできるわけですが、常に同じ人が更新するわけでもないので、個々のスキルに依存しなければならないシステムは、うちの仕事には合ってなかったということです。 そんなところからスタートしたa-blog cmsでの業務ですが、使っていくうちにいろいろ他にも便利
色って「見えている」ことが前提なわけですが・・・ この記事は、Web Accessibility Advent Calendar 2014の10日目の記事です。 僕はいつも色のことを話したり書いたりする機会が多いのですが、そもそも色というのは「見えている」ということが前提になっているものです。その「見えている」人の中でもいろんな色覚特性の人がいて、そういう人たちでも、きちんと見ることができるよねという基準として、コントラスト比が定められていたりします。 それを実現するためにはうんぬんという話を書こうと思っていたのですが、ちょうど昨日チャットワークの守谷さんが「色とデザイナーとアクセシビリティ」という素晴らしい記事を書かれていらっしゃったので、そちらを読んでいただくことにして、私は妄想に舵を切らせてもらいます。 実装系の話ではなく、漠然と考えていることをそのまま書いただけなので、オチは付かな
お客さんに喜ばれるJimdoとa-blog cmsの投稿の簡単さ うちで制作を行う場合にはJimdoとa-blog cmsの併用が中心です。 これは使う側の「投稿する」ということに限っての学習コストが高くないからです。WYSIWYGエディタを使わない、使わせないって、ものすごく大事なことだと僕は思っています。WYSIWYGエディタなら簡単というのは大きな間違いで、「Wordみたいに書けますよ」というのが通用しない場合も多いのです。 a-blog cmsの場合はユニットでの入力という特徴があるので、WYSIWYGエディタを使わなくてよいことと、画像ユニットが文章と分けられるというのが、混乱を招かないという感じです。 もちろん1つの入力欄で画像もその中に見えるというのがわかりやすいという人もいますが、更新する人のスキルがばらけている場合には、使い慣れていない人に揃えておくのがよいと思っています
a-blog cmsの合宿に参加してきました。悩んでいた部分も解消できたので、自分用にWYSIWYGエディタのカスタマイズについて忘れないように残しておきます。 a-blog cmsではWYSIWYGエディタとしてCKeditorが採用されています。使わなくてよいならなるべく使いたくはないのですが、お客さんの要望や利便性を考えた場合に、無下に消し去るわけにもいきません。 かと言って、フル機能で提供すると大変なことになってしまうということで、簡易的なものを搭載することにしました。 機能としては、以下のものに絞り込んでいます。 太字 打ち消し線 リンクの挿入と削除 フォントサイズ(80%～200%の5段階) 文字色(読みやすいような4色・「その他の色」の削除) スタイル(3色のマーカー) 絵文字 書式の解除 ソースの表示 テキストリンクと間違われないように、青の文字を無くしてみたり、あまりに小
とあるWebサイトを見ていて、ものすごく読みづらいメインビジュアルのキャッチコピー(すなわち最も伝えたいであろうというコピー)を見つけたのですが、もしかするとその辺りをチェックすると制作会社のよしあしを見極められるかもしれないと思ったのでまとめてみました。 コントラスト比は1.34:1でした テキストの読みやすさの感じ方には個人差があるので、今回はJIS規格(JIS X8341-3:2010)でも採用されているコントラスト比を基準にして話を進めます。コントラスト比のことがわからない方はいったん下記の富士通のページをご覧ください。 http://jp.fujitsu.com/about/design/ud/jis-sc/sc7143.html 簡単に言うと、背景が白で文字が黒という最も色の差が大きい組み合わせだと21:1に、背景と文字が同じ色で、まったく見えないという場合には1:1という数値
前の記事でレポートしたデザイントレンドの前日打ち合わせと称した飲み会の席で、登壇者の原一浩さんから、「なんでヒューレットパッカードの色が黒から白に変わったんでしょうね」と言われていたのですが、結局当日はセッション時間の都合で話せなかったので、ここで私の見解をまとめておきたいと思います。 まずは2011年と2012年のスクリーンショットを並べてみました。これはまたガラッと変えてきましたね。 そもそも大きく色を変えなければならない時は、企業としての戦略が変わったときがほとんどです。会社の業績が堅調であれば、ブランドイメージを変える必要はないのですから。さらに発展させたいという場合もあるでしょうが、大きく色をを変えることで、今までのブランドイメージを壊してしまうこともあるため、リスクが高いことからよほどのことがない限り、しない方が無難だと思います。 そんなわけで、そもそもヒューレットパッカードが
岡山Webクリエイターズでの登壇の翌日に開催されるamplifizr, Vol.5に「検索エンジン最適化」の管理者・運営者である住太陽さんが登壇されるとのことで、そのままセミナーに参加してきました。 内容はツイートがtogetterでまとめられていますので、そちらを見ていただく方が理解しやすいと思います。きちんとまとめると、住さんがまた気弱になりそうなので、ここはツイートを読んでもらうということでご了承ください。 十分に煽りを入れながら進んでいくセッションの中で、特に私の心に残ったのは主に以下の3つです。 自社サイトがちゃんとしてない会社がクライアントの会社をちゃんとできるって言い張るのはどうなん?(超訳) 「クライアントのレベルが」とか「クライアントの意欲が」とか言う前に、レベルも意欲も高いクライアントを見つける努力をしろよ(超訳) オーソリティになろう まったくもって仰る通りで、Web
「ウェブ配色 決める!チカラ 問題を解決する色彩とコミュニケーション」の読みどころをまとめられなかったよ いよいよ来週(2013年2月8日)に、単著としては2年ぶり4冊目となる「ウェブ配色 決める!チカラ 問題を解決する色彩とコミュニケーション」が発売されます。そこで今回の書籍はどういうことを考えて書いたのかなどをまとめてみたいと思います。 もう書きたいことなんてないと思ってました 正直なところ、書き始めるまでは今までの3冊で書きたいことは全部書いたつもりでいました。 1冊目は「効果的に伝えるWeb配色標準デザインガイド―ユーザビリティ/アクセシビリティ/マーケティングを考慮したサイトの色彩設計からの配色の実際まで」という本でした。どう見てもAmazonに対するスパムです・・・。自分が配色を行ったり、従来の配色の本に抱いていた違和感を解消することを考えて書いていたら、教科書のように淡々して
配色の参考になる本はたくさんありますが、Webサイトの配色に関連が強いもの・使いやすいもの、に限ると、それなりに有益な本は絞られてきます。デザインの初中級者向けに、役に立ちそうな本をジャンル別にまとめてみました。 総合 Web配色に関する書籍は、色のイメージを中心とした見本帳のようなものがほとんどで、デザイン・マーケティング・ユーザビリティ・アクセシビリティなどを総合的に紹介している本はほとんどありません。それが私の本が世の中に存在する理由となっています。 まずざっくりとWebの配色について学びたいのであれば、自著で恐縮ですが、まず以下の2冊挙げることになります。基本的な事項は押さえられるように書いたつもりですし、それなりにまとまっていると自負しております。 上記の2冊は出版時期も出版社も異なるのですが、2冊合わせるとより効果的かと考えております。先に出版された「Webプロフェッショナルの
色ってそんなにセンスは関係ないですよ 「色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ」という記事があったので、思うところとかを含めて配色の方法についてまとめてみました。私の方ではもう少し具体的な配色の方法についてもまとめたいと思います。 いつもWebカラーセミナーで話すのは、配色に関する問題の8割は知識で解決するということです。「色彩のセンスがない」という人はそもそもその勉強をしたことがないという人が多く、勉強したことのある人は「色は難しい」と仰います。逆に数十年グラフィックデザインをやっていても、Webの配色としてはまったくできていないということも多々あります。これはセンスではなくWebでのセオリーがわかっていないということになります。 センスと知識や学習していないことを同列に扱うのはおかしいですね。 デザイナーで色の勉強をまったくしたことがないという人はやや問題がある
私がWebの配色を考えたり、打ち合わせでクライアントに色を見せたりするのに使っているiPhone用の無料カラーアプリをご紹介します。 1.Japanese COLORFUL DATA 起動してみると一瞬なんのことやらわからないのですが、日本の伝統色を写真付きで見られるアプリです。写真のようなカラーバーが画面いっぱいに表示されますので、タップするとその色が使われたイメージと簡単な解説を見ることができます。 これだけで色が決まるわけではありませんが、話の導入とかネタとかしては非常に使いやすいです。いつも言っておりますが、赤とか青とか言うよりは、写真のような「杜若色」とか言う方が説得力を増すわけです。海外の色名も入ったもので説明付きのアプリはまだ見つかっていません。あ、作ればいいのか・・・。検討してみましょう。 2.Peppermint Color Express Peppermint Colo
photo credit: gruntzooki 画面全体の配色ほど気にはされないのが、本文テキストの配色です。まあ読めればいいという感じもするので、最低限のことをやっておけば、それほど問題が生じる場所ではありませんので、今日はその最低限についてまとめてみたいと思います。あくまで私が考える最低限の配慮ですが、無料のテンプレートを使った個人ブログなどでは、全然できていないことも多いです。と言うわけで、今回は初級者向けの記事です。 文字のコントラスト まずは文字の読みやすさについて見ていきましょう。 背景色と文字色のコントラストが低いと当然のことながら文章は読みづらくなります。背景色を白（#FFFFFF）とするならば、文字は黒（#000000）というのが基本になりますが、環境によっては、コントラストが強すぎるため、多く使われているのは#333333くらいの色でしょうか。 するとWebではありが
カラーコンサルタント・Webデザイナーであるフォルトゥナ代表の坂本邦夫がWebの配色やデザイン、色彩に関するあれこれをアウトプットするブログです。iPhone用の配色ツールを公開しました。Webアプリですので、どなたでも以下のページから利用することができます。 http://www.color-fortuna.com/wcg_iphone/ iPhoneでの使用 続きを読む
iPhone用の配色ツールを公開しました。Webアプリですので、どなたでも以下のページから利用することができます。 http://www.color-fortuna.com/wcg_iphone/ iPhoneでの使用に特化する形で作っておりますので、普通のパソコンからの閲覧は、SafariとかChromeならなんとか使えないこともありませんが、FirefoxとかIEは検証すらしておりませんし、修正するつもりもございません。もし見れない場合にはほぼ同じことのできるPC版のページをお試しください。 ふわっとした使い方 説明が必要なほどの難解なツールではありませんが、機能紹介も含めてざっとまとめてみました。 まずiPhoneのSafariでURLを開くと、下のような画面が表示されます。 このままでも使えないことはありませんが、以下の要領で、ホーム画面にアイコンを追加して起動することで、より広い
photo credit: eliazar 配色の参考になる本はたくさんありますが、Webサイトの配色に関連が強いもの・使いやすいもの、に限ると、それなりに有益な本は絞られてきます。デザインの初中級者向けに、役に立ちそうな本をジャンル別にまとめてみました。色だけで解決しないことも多いので、 総合 Web配色に関する書籍は、色のイメージを中心とした見本帳のようなものがほとんどで、デザイン・マーケティング・ユーザビリティ・アクセシビリティなどを総合的に紹介している本はほとんどありません。それが私の本が世の中に存在する理由となっています。 まずざっくりとWebの配色について学びたいのであれば、自著で恐縮ですが、まず以下の2冊挙げることになります。基本的な事項は押さえられるように書いたつもりですし、それなりにまとまっていると自負しております。 上記の2冊は出版時期も出版社も異なるのですが、2冊合わ
How to Use Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula arcu, ultrices eget faucibus et, ornare vel massa. Mauris rutrum, mi eget cursus ullamcorper, libero nisl porta ante, ac dignissim dolor nulla vitae odio. Phasellus ullamcorper massa id nisi cursus feugiat. Quisque lectus orci, molestie ac dapibus eget, dapibus sed elit. Proin ultricies, dolor at rhoncus adipisci
2011年3月5日 【Webカラーセミナー大阪】実例から学ぶ配色テクニック ウェブサイトの色彩は印象に残ったり美しいという心理面での効果だけでなく、わかりやすさや使いやすさなどの機能的な効果も求められます。 このセミナーではウェブの配色を色彩調和編と色彩機能編、色彩マーケティング編の3部に分けて、実際のサイトを見ながら解説します。時間の許す限り、多くのサイトの色を見て、自分のデザインに応用できる実践的な知識を身につけていきましょう。そのため色彩の基本的な用語などの解説はいたしませんので、ご了承ください。 お申し込みの方は1人1サイトに限り、坂本のコメントのほしいサイトをリクエストすることも可能です。（必ずセミナー内でコメントいたします。リクエストされた方のお名前などは紹介いたしません） 講師はウェブサイトの色彩プラン、コンサルティング、調査を経験したカラープランニングオフィス フォルトゥナ
ウェブサイト色彩設計書 株式会社○○○○向け 「☆☆☆☆☆☆」 2007年MM月DD日 カラープランニングオフィス・フォルトゥナ 色彩設計のための基本情報 色彩設計：カラープランニングオフィス・フォルトゥナ 坂本邦夫 サイトテーマ ターゲット コンセプト 競合サイト 現状と課題 1.新品パソコン周辺機器のネット販売数を向上させる。 2.中古パソコン周辺機器のネット販売数を向上させる。 3.実店舗への誘導力を強化させる。 スピーディー・誠実・元気な印象 トータルコンセプトに沿い、スピード感、誠実感、元気さが見えるデザインかつ、 赤白のコーポレートカラーを守る。 G社 http://www.hoge.com/ H社 http://www.hoge.com/ B社 http://www.hoge.com/ O社 http://www.hoge.com/ A社 http://www.hoge.c
セミナー概要 このセミナーは実際に配色を行うデザイナーではなく、ウェブの発注者やディレクターなど、他人のデザインをチェックし、修正させる立場の方のためのものです。 デザインを見るときにどの部分の色を見なければならないのか、必ず押さえておきたい配色の原則、避けなければならない色の使い方などを学ぶことで、色彩による機会損失を減らし、より完成度の高いサイトをデザイナーに目指させることを目的としています。 そのため、「この色を使えばこんなイメージになります」というようなデザイナーの職分である色の組み合わせの話などはあまりしませんのでご注意ください。（配色技術については別のセミナーを企画中です） セミナーの概要 講座名 【Webカラーセミナー】デザイナーにNo!と言える色彩スキルを修得！(2.5時間) 講師 カラープランニングオフィス フォルトゥナ代表 坂本邦夫 Webカラーのスペシャリストとして、
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
デザイナーにNo!と言える色彩スキルを修得！ 場所：大阪産業創造館 5F 研修室A・B 時間：2010年9月28日(火) 18時30分～21時 講師：カラープランニングオフィス フォルトゥナ代表 坂本邦夫 セミナー概要 このセミナーは実際に配色を行うデザイナーではなく、ウェブの発注者やディレクターなど、他人のデザインをチェックし、修正させる立場の方のためのものです。 デザインを見るときにどの部分の色を見なければならないのか、必ず押さえておきたい配色の原則、避けなければならない色の使い方などを学ぶことで、色彩による機会損失を減らし、より完成度の高いサイトをデザイナーに目指させることを目的としています。 そのため、「この色を使えばこんなイメージになります」というようなデザイナーの職分である色の組み合わせの話などはあまりしませんのでご注意ください。（配色技術については別のセミナーを企画中です
次のページ
このページを最初にブックマークしてみませんか？
『ホームページの制作・活用のアドバイス 大阪 | フォルトゥナ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
