配色パターンからWebデザインを考える
2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト！ まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和食・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽
シンプル、ミニマルなサイトを作りたい時に役立ちそうなアイコンやフォント、ギャラリーなどのまとめ - かちびと.net
個人的にミニマリズムなサイトが 好みなので自分用の備忘録です。 情報が多いので若干まとめのまとめ という感じになっていますがご了承 下さい。シンプルなサイトを作る時に 役立ちそうなリソースやギャラリーを。 内容はシンプルなアイコン、インスピレーション向上に必須なギャラリー、相性の良さそうなフォントなどになります。 白黒のサイトを作りたいときに役立つもの、という記事と被りますがご了承下さい。 Iconic モノクロながら可愛らしい感じのアイコン103個セット。 Iconic picol 汎用性の高そうなアイコンセット。 picol Token 色々なところで紹介されてるアイコン。28万人中10万人はDLしてるみたいです。人気ですねー。 Token Brightmix icon set EPSファイルで配布されるアイコンセット。丸型にほぼ統一されてます。地球のアイコン凄いですね。。 Brigh
もし日本のメーカーが iPhone を発売していたら..
iPhoneは会社から支給されて使っていますが、非常に使い勝手がいいです。 ただ、これでは、いまほど欲しくならないことはたしかですね。 他の機種と同じ土俵の上に上がってしまっているので、「なんかいろいろ機能がごてごて付いてる中の携帯の一つ」というところでしょう。 つまり、「売れるモノも売れなくなる」、「売り方次第」ということを今更ながら思い知らされました。
素敵な名刺デザインいろいろ
個人的に好みの名刺デザイン の例をメモ。いつか書きたいと 思っていましたが、なかなか 機会がありませんでした。 個人的に好みの名刺デザイン の例をメモ。いつか書きたいと 思っていましたが、なかなか 機会がありませんでした。 たまたま、先日名刺の話題を Twitterでしていたのでついでに エントリー。 一貫性もコメントも何も無い、個人的なメモ（ギャラリー）です。 Paper Napkin Designs Paper Napkin Designs i Draw Designs i Draw Designs caddyshack putters caddyshack putters ed ed doTerra doTerra Andy-Westwood Andy-Westwood Bridge Photographic Bridge Photographic Tecknogr▲fick™ Te
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
色の組み合わせでもう迷わないためのカラーセオリー | ライフハッカー・ジャパン
Webデザインでも企画書でも、色使いや色選びというのはなかなか悩ましいものです。デザインブログ「Before & After」に、デザインのプロでなくても上手な色選びができる、PDFのカラーセオリーのパンフレットがありました。 そのパンフレットによると、色相、濃淡、カラーパレットに関して少しでも知識があると、色の組み合わせがグッと良くなるということです。写真周辺に持ってくる色を上手くコーディネートするには、ちょっとした芸術的＆科学的センスと、ちょっとした色に関する知識があれば十分。全25ページのパンフレットを読めば、なんと完璧な色選びができるようになるそうです。 パンフレットの中では、まず写真のデジタルデータから自然なカラーパレットを作成する方法が載っています。そのカラーパレットの中から、ポイントとなる色を選び、寒色系や暖色系、トーンや色相などを揃えながら、自分好みに組み合わせていきます。
フリー素材を配布するデザインブログ20+ – creamu
デザインに使えるフリー素材を探している。 そんなときにおすすめなのが、『20+ Design Blogs that Release Quality Freebies』。フリー素材を配布するデザインブログ集です。 有名なサイトからちょっとマイナーなサイトまで、たくさん揃っていますね。いくつかご紹介します。 Lost and Taken フリーのテクスチャを配布しているサイト。商用無料のものもあり Bittbox クオリティーの高いブラシやベクター素材で知られるBittbox。最近はフリーのテクスチャパックを多く配布している Fudge Graphics ブラシやテクスチャ、ベクター素材、壁紙などを配布しているFranz Jeitz氏のブログ Colorburned Photoshopやillustrator用のブラシを配布している。ベクター素材やパターンなどもあり Think Design
プロの現場でも使えるハイクオリティなフリーフォント「35 Latest High-Quality Free Fonts for Professional Designers」
プロの現場でも使えるハイクオリティなフリーフォント「35 Latest High-Quality Free Fonts for Professional Designers」 フォントのがデザインに与える影響はとても大きく、フォントの選び方でデザインの感覚がガラリとかわったりします。今日紹介するのはプロの現場でもプロの現場でも使えるハイクオリティなフリーフォントを集めたエントリー「35 Latest High-Quality Free Fonts for Professional Designers」です。 Kilogram 今日は今までDesigndevelopで紹介した事が無いフォントを中心にいくつか気になったフォントをピックアップして紹介したいと思います。 詳しくは以下 ■ Franchise とにかくスタンダードな書体。汎用性があります。 ■Bada Bing ギリギリ文字と認識で
フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
Webデザインパーツごとのデザイン例 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザインユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。 30 Creative Website Headers クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。 30 Creative Website Headers 27 Stunning
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
知っておきたいillustratorのチュートリアル40 – creamu
illustratorのスキルを上げたい。 そんなあなたにおすすめなのが、『40 Fundamental Illustrator Tutorials You Must Know』。知っておきたいillustratorのチュートリアル集です。 いい感じのものが揃っているので、いくつかご紹介しますね。 How to Create a Gearbox Settings Icon Using Simple Shapes シンプルなシェイプを使って、ギアの形をした設定アイコンを作るチュートリアル How to Create an Abstract Vector Design in Illustrator 美しい抽象的なデザインは、シンプルな形から作られる。いくつかの形と透明度に変化を持たせたサンプルの作り方 How to Create an Open Book with Illustrator’s
ウェブデザインでこれは気をつけたいの35のポイント
ウェブサイトやブログの作成・運営で、避けておきたい35個のミスをnetjellyから紹介します。 List of Web Design Mistakes You Should Avoid 下記は、各リストを意訳したものです。 ※訳者注： 一部過激なものは表現を少し和らげています。 はじめに ウェブサイトやブログを開発・作成する際に、避けた方がよいミスをリストアップしました。 1. 作るだけでは終わりではない ウェブサイトは開発・作成だけでは終わりではなく、公開・運営する必要があります。そして、オンラインやオフラインでウェブサイトの告知に手間や時間をかけることはいっそう必要になります。もし、あなた自身があなたのサイトについて時間をかけないなら、他の誰もそれはしないでしょう。 2. 広告をコンテンツに混ぜない 広告をコンテンツに混ぜると、短期的にはクリック数を増やすかもしれません。しかし、ユー
フリーで配布されているPhotoshopのパターンいろいろ
以前、必要になった時に探したサイトをメモ。 Photoshopのパターンを配布してくれている サイトのまとめです。多くの場合はセット配布 や、Photoshop関連の専門サイトなので まとめのまとめという形になります。全て無料 ですが、著作権は個別にご確認下さい。 何かと重宝するPhotoshopパターン。全てフリーでダウンロードできます。 208 Retro Photoshop Patterns レトロなPhotoshopパターン208種。 208 Retro Photoshop Patterns 200+ free beautiful Photoshop patterns hand-picked 200以上ものPhotoshopパターンまとめ。 200+ free beautiful Photoshop patterns hand-picked Web treats Web treat
写真の「ボケ」をウェブデザインにとりいれるためのスタディ
写真の主題を引き立たせるために使用される「ボケ」をウェブデザインにとりいれるためのスタディをPSDFanから紹介します。 Inspirational Examples of the Bokeh Effect 以下、各ポイントを意訳したものです。 ボケとは ボケの実例 デジタルアートでのボケ ウェブデザインでのボケ ボケのチュートリアル ボケとは ボケとは、写真撮影の際にレンズを利用して光の焦点をぼかしたものです。このボケは、レンズによってもさまざまなものを楽しむことができます。 通常、ボケは主題を引き立たせるために使用されるもので、主題以外のものをぼんやりとさせます。 ボケの実例 写真撮影でのボケを実際に見てみます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロユースレベルの高品質なフリーのフォント集
新着記事
Photoshop Vip » ダウンロードしておきたい100個のフリーフォント保存版まとめ
IDEA * IDEA
企業ロゴにも使えるエレガントなフリーフォント30個まとめ - PhotoshopVIP
