非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
流行先取り 注目の最新Webデザインおすすめ30選まとめ
「デザインのアイデアがなかなか見つからない」 「Webデザインの最新トレンドを知りたい」 「かっこいいデザインの見本サンプルが欲しい」 そんなときに目を通したい、旬のトレンドを取り入れた最新おすすめWebデザイン30選をご紹介。 国内外のウェブギャラリーでも取り上げられている、世界中からセレクトされたホームページやWebサイトばかり。 レイアウトや配色、フォントえらびなど、実用的なアイデアに困ったときに役立ちます。 流行先取り 注目の最新おすすめWebデザインまとめ 隅田川道中 ページ全体に広がる波紋エフェクトにはじまり、 和楽器集団による演奏など、一度見たら忘れなそうなサイト。コンテンツに進むにつれ音量がさがり、最後のフッターでふたたび最高潮に。 ノースマン公式サイト エレガントなフォント使い、 重なりのある自由なレイアウトなど、どれもサイト制作の参考になりそうな仕掛けがたくさん。 Ha
【定番】UIデザインで効果的なドロップシャドウ、影の付け方５選
文字や画像に、まるで影が落ちているような立体感を表現できる、「ドロップシャドウ（英： Drop Shadow）」。 美しい影をデザインするテクニックや、コピペ可能なCSS便利コレクションや色付きの影生成ツールなど、さまざまな「影」を紹介してきました。 今回は、最近のWebサイトで効果的なドロップシャドウ5つのスタイルの作成方法、使いかたを詳しくみていきましょう。 1. 基本のドロップシャドウ 2. ハードシャドウ・スタイル 3. ハイコントラスト・シャドウ 4. ローコントラスト・シャドウ 5. カラーシャドウ まずは、基本のドロップシャドウ ウェブサイトでもよく見かける、一般的な以下のカード型UIデザインを参考に、さまざまなドロップシャドウを追加していきます。 ここでは、無料ダウンロードできるFigma用UIキットを利用。画像イメージや見出しも便利なプラグインで自動、一発で挿入してくれま
LP（ランディングページ） | SANKOU!
コーポレートサイト ブランドサイト･サービスサイト ECサイト･オンラインショップ キャンペーン･特設･プロモーションサイト ポータルサイト･メディア･情報サイト プラットフォーム･コミュニティサイト 採用サイト･採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある･作り込まれている イラストを使用 3D表現･3Dイラストを使用 シズル感･訴求力のある写真･動画使用 写真少なめ･写真以外のビジュアル表現 さりげない動き･動きなし やや動きあり ダイナミック･印象的･細やかな動き 日本語メイン ノーコードツール｢STUDIO｣で制作 スマホ特化･モバイルファースト Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･
「阿部寛のホームページ」が『ドラゴン桜』出演情報を更新！ 事務所が明かす今後のサイト運営 | 週刊女性PRIME
Googleが提供する「PageSpeedInsights」によると、デスクトップ表示に関して驚異のスピードを叩き出している（4月25日取得） 実に16年ぶりという長い期間を空けての続編となった。 「ブスとバカこそ東大に行け！」という過激なフレーズも話題となり、人気を博したドラマ『ドラゴン桜』（TBS系）の続編が4月25日にスタートした。 「同名漫画のドラマ化作品で、阿部寛さんが元暴走族の弁護士役を演じました。経営難の高校に債権者代理として乗り込み、東大合格者を輩出する進学校にする再建プランを立ち上げ、低偏差値の高校生を東京大学に現役合格させるというストーリー。前作は平均視聴率は16.4％、最終回で20％超えの結果を残しました。 続編では、学校再建のエキスパートとなった阿部さんが、別の高校で再び進学校化を進めようとしますが、江口のりこさん演じる理事長と対立。前作で阿部さんの“教え子役”だっ
2秒で勝負！LPから直帰させないためのキービジュアルデザイン術｜LPデザイン道場 第二回 - リスティング広告運用代行ならASUE
2019年にASUE株式会社へ入社したWebデザイナー。 前職を含め、業種やtoB・toC、ターゲットの性別や年齢層を問わずに、LPを総計100本以上制作してきた。 「見た目の美しさ」以上に「効果を出すためのデザイン」に注力している。 何かを追求する姿勢はオタク的ですらある。実際オタク。平野耕太氏の漫画が大好き。 LPの一番大事な所はキービジュアル さて、前回の「LPのかっこよさと売れるかどうかは別の話」ではLPを作る上での心がけというかマインド的なふわっふわの内容になってしまいましたが、今回からは具体的かつテクニカルな内容をエレガントにアナーキーにスバラーシクお届けできればと思っています。 しばしお付き合いくださると幸いです。 早速ですが、LPで一番大事にするべき箇所はいったい何でしょう？ 見出しで既にネタバレかましていますが、キービジュアル（KV）です。 メインビジュアル、ヒーローイメ
意識低い系デザイン本がついに発売！整列ビーム、近接ホールド、デザインの基本がマンガで分かる -デザイナーじゃないのに！
デザインの4原則といえば、 「整列ビーム」「近接ホールド」「メリハリパンチ」「反復リピート」です！ Webでも紙のデザインでもこの原則を使うだけで、デザインがぐっとよくなります。 マンガを笑いながら読んでいる間に、デザインの基本がしっかり身についてしまう、新感覚の意識低い系デザイン本を紹介します。 「けっきょく、よはく。（紹介記事）」「ほんとに、フォント。（紹介記事）」、そして先日発売されたばかりの「あたらしい、あしらい。（紹介記事）」のソシム社から、今度は意識低い系のデザイン本が登場です！ 「デザイナーじゃないのに！」と叫んでいる主人公と一緒にデザインを学ぶ楽しいマンガです。しかも、まさかのラブストーリー！
いま話題の 「stand.fm」 のUIを全力でトレースしてみた！｜kakeru tokunaga
皆さん stand.fmというアプリ/サービスを知っていますか？ そうです。音声サービス界隈に彗星の如く現れたニューヒーローとも言えるサービスです。そのぐらい今、勢いがあると思います。 皆さんご存知の通り、音声コンテンツ市場は近年、googleやspotifyの参入やスマートスピーカーの普及に伴ってかなり盛り上がっており、日本の市場も例外ではなく、RadiotalkやVoicy、Recなど様々なサービスが存在しています。 そんな盛り上がりを見せる市場で、最近、特にコンテンツの充実・サービスとしての伸びを見せているのが、この stand.fm だという事です。 僕は今まで、appleのpodcast、Voicy,Radiotalkのユーザーでしたが、そんな僕が最初にこのアプリを触った印象は、 「使いやすい！UIがかわいい！」 気軽にTwitterのタイムラインから飛んで配信を一度聞いたつもり
簡単な様で難しいバナー制作の話｜あんさい
こんにちは、イラストレーターでデザイナーのあんさいです。 近頃は株式会社リブセンスの転職ドラフト＆デザイナードラフトで、ノベルティやバナーなどデザインをさせていただいております。 今回はデザイナードラフトでのクリエイティブについてお話したいと思います。 バナーの改修について 早速ですが今回は、こちらのバナー改修についてのお話をしていこうと思います。 ありがたいことに僕が作成したこのバナーをトレースの題材にしてくださった方が....! デザインチャレンジ10日目〜🙌 今日は転職ドラフト（@tensyoku_draft）さんのバナートレース。よくみるとあれがあれなんですが…🙇♀️ 【学び】 ・フリーの水彩ブラシをゲットして背景ペタペタしてみた ・●をふんわりさせるのが難しかった（簡単な方法調べたい） ・数字はCentury Gothicな気がする…！ pic.twitter.com/0W
なぜダメなデザインが生まれるのか
ますます力を増すダークパターン ユーザーが思いもしなかった操作をさせて、会員登録、購入、サイト流入をさせるテクニックを「ダークパターン（Dark Patterns） / Dark UX」と呼ぶことがあります。サイトへアクセスしたら問答無用にモーダル UI を出すのは初歩と言っても良いくらい。中には行動心理や知覚をうまく利用したダークパターンもあります。 Twitter のハッシュタグ「#darkpatterns」で数多くの事例を見ることができるので、こちらも注目。 集中力が低くなった今日のユーザーは、即座に判断して行動をする傾向があります。これ自体悪いことではないですし、デザインの力が試される部分ではありますが、下記のような手法で悪用されることもあります。 情報をわざと見えにくくする ベストプラクティスを逆手にとる 罪悪感を促す 偽 X を設置する 嘘をつく ダークパターンは聞いたコトがな
「Webデザイナーはコーディングできるべきか」という議論に対する私の考え
過去にも何度か話題になっていましたが、ここ最近TwitterのWeb制作者界隈で過去最高に「Webデザイナーがコーディングできるべきかどうか」という議論が白熱しているように思います。 かなり悩んだのですが、私なりにお話しできることもあるかと思い、この件について私の考えを記事にまとめて公開することにしました。 コーディングとはどこまでを指すか 「コーディング」といっても、人によって指しているものが違うと思います。 ここでは4つの段階に分けてみます。 ごく基礎的なHTMLやCSSを書くことができるコーディングのトレンドなども抑えた上でモダンなHTMLやCSSを書くことができるHTMLやCSSに加え基礎的なJavaScriptを書くこともできるHTMLやCSSはもちろん、本格的なWebアプリケーションの開発もできる このうち1に関しては、私は「議論の余地なくWebデザイナーも書けるべき」だと思っ
なぜ優秀なデザイナーでも酷いデザインを生み出してしまうのか？ デザイン会社 ビートラックス: ブログ
日常生活において「なんでこんなデザインにしちゃったんだろう？」と感じることが意外と多い。 誰がどう見たって醜いルックス、どうしたって使いにくい操作性、非常に心地悪い体験、などなど。もっと良いデザイナーにデザインさせろよ！と思うかもしれない。でも、もしかしたら原因は他にある可能性も。 優秀なデザイナー ≠ 優れたアウトプット優れたデザイナーに頼めば、必ず優れたデザインをしてもらえるのか？答えはNo。むしろどんな優秀なデザイナーであっても、低いアウトプットのクオリティーが低いものになってしまうこともある。 そして、その理由はデザイナーのスキル以外にあったりする。これは、イコール優秀なデザイナーさえ雇えばクオリティーの高い結果が出るわけではないということでもある。 ■ 醜いデザインが生み出されてしまう主な理由■事前に十分なインプットが得られていない間違った期待値設定クライアントや担当者に対して間
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
デザインのクオリティを上げる「リフレクション力」｜たけてつ
先日、上平先生のブログを拝見して、雑談してたらデザイナーの話で盛り上がったのでその話や考えなどを図解と共に整理してみました。 哲学者のドナルド・ショーンは、1983年にReflection（省察）を二つに分けています。それが、「Reflection in action（行為の中の省察）」と「Reflection on action（行為にもとづく省察）」です。 1つ目のリフレクション "Reflection in action"Reflection in action（行為の中の省察） とは、「何かをする中でふと頭に浮かんだことや、感じ取ったことを自分の中で吟味のまな板の上に乗せること」とのこと。デザイン研究者の須永剛司 氏は、それをシンプルに「じゃない感」と呼んでいらっしゃるとのこと。そして、こう続いています。 デザイナーは、たくさんのアイデアスケッチを描きますが、決して頭の中に降ってき
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
デザイン崩れがよりよいデザインを生む
AlexanderはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。 UIデザインは難しいものです。スマートフォンやタブレット、ノートパソコンなどのデバイスによって形やサイズはさまざまで、キーボードやマウス、タッチパネルといった入力方法を採用しているかどうかも異なります。こうした状況で優れたデザインをするには、何よりデザインを徹底的に変える方法を学ばなければいけません。 私はこれまで、十分な種類の方法でテストしなかったために、開発プロセスの終盤でデザインが破綻してしまうプロジェクトを何度も見てきました。このような時間と労力の浪費は、簡単に減らすことができます。 こうした失敗にはいくつか理由があります。たとえば、ストレスや土壇場での修正、不明瞭な要件といった原因が挙げられるでしょう。ただ、単にデザイナーが行き当たりばったりで不注
グッドデザインな2020年度新卒採用サイトまとめ9選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまべです。 すっかり季節は秋めいてきましたが、秋は採用市場が活発になる季節です。そこで昨今気になった採用サイトをいくつかご紹介したいと思います。 S-GROOVE https://www.s-groove.co.jp/freshers/ カラフルな配色の中に質の高い社員さんのポートレイト写真が特徴的なこちらのサイト。いろんなギャラリーサイトや雑誌にも載っているので知っている方も多いと思います。 大きめに配置されたタイポグラフィとメニュー、ボタンでユーザビリティを担保し、支給の写真とも思われる写真もデュオトーンに加工して全体のトンマナを整えています。淡い配色ながら大人っぽく、センスの良い会社というイメージを醸成させるデザインに仕上げています。 つばめタクシー大和グループ https://tsubametaxi-yamato.com/ 鳥に擬態した青い人の写真のビジュア
Webサイトの「空白」がデザインに与える３つの効果
Tomerは、受賞歴のあるデザイナーであり、プロのデザイナー向けのコードフリーWebサイトデザインプラットフォームWebydoのUXマネージャーです。 完成したデザインを見つめて「何かが足りない」と感じたことはありませんか？ より具体的に言えば、デザインが「空っぽだ」、「散らかりすぎだ」という結論に達したことはないでしょうか？ 私たちデザイナーにとって、このような状態に陥らないよう、制作物に十分な時間を費やすのは難しいことです。 このような現実は衝撃的ではないでしょう。結局のところ、デザインのもっとも基本的な原則は、クリエイティブに要素を取り除き空白を作ることに関連しています。しかし、この作業は私たちの仕事の中核であるにもかかわらず、もっとも難しい作業の１つです。どのようにすれば空白を効果的に利用できるでしょうか？ 空白の本当の意味 空白を「デザインの間のスペース」と考えていませんか？ デ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デキるWebデザイナーを目指せ！本当に現場で使えるCC活用テクニック
The Blog | Welcome to Adobe Blog
