さくうち @sakuuchi__ この赤、ピンク色として好きなんですが(もうデザインができない)原色もむちゃくちゃ使ってしまう(クソ弱い)ので意識して改善したい 2019-03-17 22:55:04
有名なブランドの名前を聞いたとき、ブランドに使われている色を無意識に思い浮かべることはないでしょうか。たとえば、スターバックスはみどり色と白色、Ikeaは青色と黄色、Fedexはむらさき色とオレンジ色といった具合です。 配色をうまく活用することで、特定の感情を呼び起こさせるだけでなく、その感情をロゴデザインに結びつけることができます。 今回は、ロゴデザイン制作に利用したい配色カラーパレット15個をまとめてご紹介します。色彩心理学をベースにした、効果的な色の組み合わせにも注目です。 コーディング向けにHEX値コピペできるカラーパレットを一緒に用意しているので、Webデザインにロゴを活用したいときにもオススメです。 ロゴデザインの配色見本!すぐに役立つカラーパレット15個まとめ 1. Yellow & Red この鮮やかな色の組み合わせは、ロゴの中心に目をすぐに引きます。鮮やかな赤色とユニーク
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく! 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
デザインの印象を決める配色は、組み合わせ次第で全く異なる印象へと変化する、重要な工程です。そんな配色だからこそ、しっかりと吟味して最適な組み合わせを選びたいもの。今回ご紹介するのはその配色を行う際に役立つwebツール「.colors{}」です。 好きなカラーコードを入力して、その色同士の相性を確認することが出来るWebデザインに最適なツールです。 詳しくは以下 ツールは大まかに、カラーコードを入力するためのテキストエディタを模したエリアと、入力したカラーコードが反映されているのを確認することのできる表示エリアの2つに分かれています。表示エリアにはカラーコードの色だけでなく、入力したコードの値も表示されるため、自分の入力した結果を一目で把握することが可能。また表示されている色のブロックはドラッグして順番を入れ替えることも可能で、直感的に操作することもできます。最初にデモ入力が表示されている為
カードデザインのUIはここ数年で大きな人気を集めています。 毎日何百万人ものユーザーが使用するGoogle、Facebook、Twitterなどは、この人気のUIコンポを利用しています。 しかし、100を超えるカードベースのプロジェクトを経験してきたデザイナー曰く、カードデザインにはいくつかの落とし穴があるそうです。 ここでは、カードベースのUIに関連したミスの中でも最も起こりやすい5つをご紹介します。 1. カードサイズがバラバラ 世界中のコンテンツは単一の様式で成り立っていません。タイトルや説明は長かったり短かったりします。 カードデザインが大画面のスクリーンで表示されるとき、ユーザーの快適なネットサーフィンを妨げるような激しい違和感を生み出してしまうことがあるのです。 たとえば、上の図のようにカード一つ一つがバラバラの大きさを持っているとユーザーにとって見にくいUIなのは歴然ですよね
※この記事は2022年2月に最新の状態に更新されています。 UXデザインとテクノロジーの融合がこれまでに無い程に進んでいる現在、テクノロジーよりもデザインの重要性が高まってきていると感じる。新しい技術が開発されるたびに話題になるが、それが継続的に世の中に受け入れられるかどうかは、デザインが担う部分が非常に大きい。 それに伴い、デザイナーの仕事の内容と、ビジネスや社会に対するその影響力もどんどん広がっている。 これからはデザインの時代デザインと言うと、ああデザイナーの話でしょ、と言われる事が多々あるが、デザインとはビジネスに関わる全ての人にとって重要な考え方である。実際、特にアメリカや欧州では社内の全てのプロセスに”デザイン的思考”を取り込み、大きな成功を成し遂げている企業が増えている。 DESIGN ≠ Design最近では英語でデザインを表示する際に”Design”と普通に書く場合と、全
洗濯表示をチェックすべき理由 洋服のお手入れは、素材に合った適切な方法で行うことが肝心ですが、そのためには洗濯表示を理解する必要があります。何も知らずに乾燥機に入れてしまったり、アイロンをかけてしまうと、型崩れや縮みの原因になることも。お気に入りの洋服を長持ちさせるためにも、洗濯表示の意味は必ずチェックするようにしましょう。 覚えるべき5つのマーク 洗濯表示は、洗濯、アイロン、漂白、タンブル乾燥、自然乾燥、クリーニングの6つのマークに分けられます。それぞれの記号が何を指しているのかを覚えてしまえば、失敗することなくお手入れすることができますよね。ここからは、6種類のマークを細かい意味と合わせて解説していきます。 洗濯 洗濯の仕方は、洗濯桶のイラストで表示されています。桶の中の数字は上限の水温を示していて、30度・40度・50度・60度・70度・95度と細かく分類。桶の下の横線は衣料品に与
This Domain Has Expired, To Renew Please Contact Your Provider.
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点(図の丸点)に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう! ↑私が10年以上利用している会計ソフト! ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター>ぼかし>ぼかし(ガウス)で5〜10pxほど画像をぼ
Xoilac tv, trực tiếp bóng đá xôi lạc tv, xoilactv xembd siêu nét Xoilac tv, trực tiếp bóng đá xôi lạc tv là trang xem bóng đá tốc độ cao, xoilactv tự tin mang lại trải nghiệm trực tiếp bóng đá euro 2024 tốt nhất cho anh em. Link xem bóng đá Xoilac cập nhật ngày 15-07-2024 Kênh bóng đá trực tiếp xoilac tv đang dần trở thành người bạn quen thuộc của mọi nhà khi phát sóng trực tiếp những trận đấu bón
Photoshopでの作業を劇的に効率化してくれる無料のレイヤースタイルをご紹介します。 これさえあれば、スタイルボタン1つ押すだけで、手の込んだレイヤースタイルをオブジェクトやテキストに適用することが可能になります。 こんな便利なものを使わない手はありません。 今回はそんな便利なPhotoshop用レイヤースタイルのうち、無料で利用できるレイヤースタイルを1000以上集めてみました。 これらのPhotoshop用レイヤースタイルで作業時間を大幅に短縮していただければ幸いです。 ダウンロードしたレイヤースタイルをPhotoshopで利用する方法 具体的にPhotoshop用のレイヤースタイルをご紹介するために、ダウンロードしたレイヤースタイルをPhotoshopで利用する方法をご紹介します。 まだ、使ったことがないという方は参考にしてみてください。 aslファイルをApplications
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から) まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
様々なアート作品がアーカイブされているスミソニアン・ライブラリーでとっても嬉しいデータが無料ダウンロードできることを知りました!アートやデザイン、ファッションに携わる方は絶対にダウンロードし手元に置いておいて損はありません。 以前「浮世絵や日本画も!博物館所蔵の4万超の画像を無料ダウンロードできるコレクションが素晴らしい!」という記事で無料ダウンロードできるコレクションを紹介しましたが、今回紹介するデータもすごいです。 それは明治時代にシリーズもので刊行されていた図案集「美術海」。当時のデザインの流行が反映された図案から古典的な文様、はたまたとてもオリジナリティ溢れる美しい図案まで素晴らしい図案集なんです。 新美術海は神坂雪佳と古谷紅麟 が携わった図案集で、彩り豊かで動きのあるデザインが盛りだくさん。古谷紅麟は神坂雪佳の後継者として期待された当時のデザイナーです。 当時のアート感覚を垣間見
テイ・デイ・エス リプラグ事業部は4月13日、Webページの構成案を美しく描くためのWebクリエイター向け「Web型定規」を発売した。価格は1500円と2000円(いずれも税別)。 Web制作で使用頻度の高い「4:3」「16:9」の基本的な画面比率や、「ホーム」「ショッピングカート」などよく使うアイコンなどのテンプレート、画面をグリッド分けするのに便利な12分割用の目盛りが入っている。 手描きでも歪みなく描けるテンプレートを使用することで、アイデア出しやブレストで必要になる手描きのラフを清書する手間を省けるとうたう。社内のWebディレクターのアイデアを元に作られた商品だという。 関連記事 MicrosoftのWebコンテンツ作成ツール「Sway」で共同編集が可能に Microsoftがオンライン版Officeスイートのβアプリとして提供しているWebコンテンツ作成ツール「Sway」に共同編
グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く