配色とは、他のデザイン要素と同じように、適度に使用することが大切です。最大で3つの色数に抑えることで、より良い結果を得ることができる傾向があります。デザインプロジェクトで色を適用することは、バランスを取ることと深く関係しています。使用する色数が増えれば増えるほど、バランスを取るのがより複雑になります。 色はデザインに心地よい品質を加えるのではなく、補強します。 Pierre Bonnard カラーパレットで決めた以外の色が必要がときは、色彩と色合いをうまく利用することで、異なるデザイントーンを実現できるでしょう。今回は、ウェブサイトの配色を決めるときに覚えておきたい７つのポイントを詳しくご紹介します。 60−30−10ルール このインテリアデザインルールは、いつの時代にも活用できるデザインテクニックで、配色を手軽にまとめるのに役立ちます。60％+ 30％+ 10％の比率は、バランスの良い色

【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

※メールマガジン「小寺・西田の金曜ランチビュッフェ」2016年11月25日 Vol.106 ＜早くも今年を振り返る号＞より 以前、本メルマガのコラムにて、「日本のウェブの見栄えを改善したい」という話をした。その軸になるのは、ウェブフォントの導入だ。今回は改めて、その話をしたい。なお、本コラムではサンプル画像やウェブへのリンクを多用しているので、メール配信ではなく、EPUB版やウェブ版での閲覧を強くお勧めする。 一般的なウェブでは、PCやスマートフォンに標準的に入っているフォントを使って表示する。これが、ウェブの表現の画一化を招いているのは間違いない。紙の印刷物ではあんなに多彩なフォントを使い、美観にこだわっているのに、ウェブになった途端にシンプルになる。 また、デバイスに内蔵されたフォントを使う場合、デバイスの採用しているOSによって表示が変わってしまうことが多く、デザインをする場合には、

株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし

CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませて…

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 大きな数字の目標を達成した時、イベントの賞金を表示する際に使われるのがオドメーターを使ったカウントアップの表示です。数字がくるくると回転して100万、1,000万などの数字になるエフェクトは誰もが見たことがあるでしょう。 そんな表示をWeb上で実現できるのがOdooです。SVGで作られており、軽快に動作します。 Odooの使い方 実際に使っているところ。激しく回転しています。 回転している様子です。 円や¥を利用することもできます。フォントはスタイルシートで変更するのが良さそうです。 Odooを使うと回転している時のワクワク感があります。使い方としては最終的な数字（円などの通貨記号があってもOKです）を指定するだけで、簡単に使えます。登録ユーザ数や運営日数など大きな数字を達成する時

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ

2016年9月1日 ユーザビリティ 8月某日、ワイヤーフレーム作成ツールのCacooなど、制作業務を円滑に進めるための様々な便利ツールを開発しているヌーラボさんにおじゃましました。そこで、まもなくプロジェクト管理ツールのBacklogをリデザインするということでしたので、ユーザビリティテストの被験者をしてみることに！ユーザビリティテストを行うことはありましたが、本格的なテストの被験者をすることはあまりなかったので、ワクワクしながら受けてみましたよ。 ↑私が10年以上利用している会計ソフト！ リデザインの経緯 長く愛用され続けてきたUIを改新するということですので、デザインを変更することを決めた理由や経緯について、中の人に聞いてみました！ 今までのUIは、少し前のWebアプリケーションで良く見られたような、1画面に多くの情報を載せてすべての機能を文字ラベルで表示するタイプでした。この方針には

placeholder.picsはダミー画像をSVGで作成出来るソフトウェアです。Goで書かれており、OSSとしてソースコードが公開されています。ダミー画像そのものはサイズ指定、背景カラー、グラデーション背景などの設定などが特徴。グラデとサイズの設定が必要ですが任意のキーワードをURLに含めることも出来るようです。ライセンスはMIT。 placeholder.picsOn Github

2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。 「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド　工藤強勝さんのスタッフ指導」より うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。 とあったので、「の」「を」「と」をTP明朝でつくってみました。 目的 紙のタイポグラフィ

解像度が多様化してきてWEB制作の一つの主流となっているレスポンシブデザイン。多くの場合解像度によって画像を出し分けたり、フォントサイズを可変したりと解像度ごとの処理をしていると思います。今日紹介するのはそんなレスポンシブデザインの精度をより高める、レスポンシブに利用できるフリーアイコンセット「Responsive Office Icons」です。 こちらのアイコンは16px、30px、40px、80pxと4段階で制作されており、さらに素晴らしいのが、単純に大きさを変えているだけでは無くて、大きさによって作りこみ度合いを変え視認性を確保しています。 詳しくは以下 全部で150のアイコンがセットされており、サイズバリエーションを含めると600ものアイコンとなっています。 配布形式はSVG、EPS、PDF、透過PNGとなっており非常に使い勝手の良いアイコンセットとなっています。レスポンシブで新

社会現象化したエンブレム騒動 新しい五輪エンブレムが発表された。ご存知の通り「市松模様」より着想を得たA案に決定したわけだが、これに関して早速、賛否両論出ているようである。もう、新しい案で進めるしかないのだろうが、これでスッキリ解決というわけにはいかなそうな空気もある。 筆者はこの騒動に関して、昨年より2度「現代ビジネス」に寄稿。年末には社会学者の加島卓氏とこのテーマに関して長い対談を行った。 そもそもの執筆の動機は、問題とされた佐野研二郎氏のエンブレム案に関して、「これは盗作や模倣ではない」という確信があったためだが（いまもあるが）、その後、佐野氏が手がけたほかの仕事や審査プロセスに関して疑義が噴出することとなった。 こうしてエンブレムが一種の"社会現象"となるにつれ、日本のグラフィックデザイン史や広告業界の抱える構造的課題にまで言及せざるをえないことになっていった。 筆者の旧エンブレム

「さくらのアイコンセット」とは？ 「さくらのアイコンセット」は、サーバやストレージなどインフラに関連したアイコンをセットにしたものです。当社サービスをご利用をされている方はもちろん、当社サービスをご利用でない方でも、ホワイトペーパー、システム構成図、プレゼンテーション資料など様々な用途にご利用いただけます。 >>こちらからダウンロードできます。 《ライセンス》 SAKURA internet Inc. クリエイティブ・コモンズの 表示 4.0 国際 ライセンスで提供されています。 《アイコンの紹介》 「さくらのアイコンセット」を含まれるアイコンについては、下記のアイコンとなります。 1 ： general 様々な用途でご利用できる汎用的なアイコン集です。 2 ： programming PHPやPythonなどのプログラミング言語のアイコン集です。 3 ： server-parts CPU

東京五輪・パラリンピックの公式エンブレムに決まった「組市松紋」のデザインを分析したツイートが話題を集めている。 ibukiさん（@ibuki7）のツイートによると、エンブレムは、大きな24角形と小さな12角形の枠組みに分割できるという。12角形の頂点を結んで小さな長方形を作り、頂点同士で組み合わせている。ibukiさんの出身大学の教授が「見つけ出すのに3時間かかった」ほど、精巧にデザインしているようだ。

4月25日に発表された2020年東京オリンピックとパラリンピックの新エンブレム「組市松紋」には、ある法則が隠れていた？ デザインの解析結果がTwitterに投稿され、「よくこんなの思いつくよね」「適当にバランスよく並べただけのデザインかと思ってました」と感嘆する声が出ている。

ほんの暇潰しで立ち上げた『負けエンブレム展』ですが、立ち上げ間もなく、各局の情報番組で紹介され、大変な反響をいただき、作品の応募総数も400点を超えました。 間違いなく、すべての作品を見させていただきましたが、なにぶん僕一人で運営しているもので、お一人ずつに御礼のお返事することができなくて申し訳ございません。 ご参加いただき、ありがとうございました。 さて。 この『負けエンブレム展』は、最終候補に残った4作品を見て、「ずいぶん無難なのが残っちゃったなぁ」「もしかしたら、落選したエンブレムの中に、もっと良いのがあったのではないか？」というアンデパンダン的な動機で立ち上げたのですが、実際、こうして400点以上の作品を見た今の僕の正直な感想は、 「たしかに4作品とも残念なぐらい無難で面白くはないけれど、あの4作品が残る理由がすごく分かる」 というところです。 というのも、応募作品の約8割が『日の

※メールマガジン「小寺・西田の金曜ランチビュッフェ」2016年4月1日 Vol.076 <変革の春号>より 【おすすめ記事】 AlphaGoから考える「人とAIの関係」 「完全ワイヤレスヘッドホン」に注目せよ！ 話題のスマホ「NuAns NEO」の完成度をチェック ソフトキーボード、ほんとうに「物理キーと同じ配列でいい」の？ 「HiDPIで仕事」の悦楽 本メルマガではなんどか書いているが、筆者にとって快適な仕事環境とは「文字がきれいに表示されるもの」である。出版の世界にいるから、普通の人よりは文字にこだわりはあると思う。が、別にデザイナーではないので、厳密なところまではわからないし、こだわるわけではない。だが、毎日何時間も向き合うものだから、きれいな方が快適であるに決まっている。だから、WindowsでもMacでもiOSでもAndroidでも、表示解像度が高くて紙への印刷に匹敵しているもの

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

Photoshopでクオリティの高い加工が可能なプラグインのNik Collectionが無料になったって！？ もともとは日本円で約6万円ほどだったそうですが、これは使わない理由はないということで早速インストールして使ってみたらマジでやばかった、、 Nik Collectionってどんなことができるの？？ PhotoshopにNik Collectionをインストールする方法Nik Collectionへアクセスし、【Download now】をクリック。 ダウンロードした【nikcollection-full】をクリック。 私は日本語オンリーなのでもちろん日本語で。。 次へ、次へ、 対応ホストアプリケーションを選択、ここでは【Photoshop CS6】にインストール。 Nik Collectionの使い方Photoshopを再起動すると、【Selective Tool】というウィンドウ