2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
新しいデザインの教科書
【ご挨拶】 / 【目次】 / settings / 解釈が変わる写真 / ラインスケッチ / 感覚の変換による観察 / 蓋の分類 / 新しい分け方の基準 / バランスによる新しい価値 / 約束事を共有することで、読みとけるようになる四コマ漫画 / 丸を取り出す / ｷﾘﾄﾘﾑｼ / レイアウトが解釈を生み出す / モノをコントロールするための身体言語 / space / 「解釈が変わる写真」野中大
カラーユニバーサルデザイン推奨配色セット
色覚の多様性に配慮した�案内・サイン・図表等用のカラーユニバーサルデザイン�推奨配色セット （バリアフリーに配慮した見分けやすい色の組み合わせ） カラーユニバーサルデザイン推奨配色セット制作委員会 ■ 東京大学分子細胞生物学研究所 脳神経回路研究分野 伊藤啓 ■ 社団法人日本塗料工業会（JPMA） ■ DIC 株式会社（DICグラフィックス株式会社・DICカラーデザイン株式会社 ■ 特定非営利活動法人カラーユニバーサルデザイン機構（CUDO） ■ 石川県工業試験場 前川満良 カラーユニバーサルデザイン推奨配色セット ガイドブック 第２版 カラーユニバーサルデザイン推奨配色セットの塗料用、印刷用、画面用の詳しい情報と、組み合わせる色の注意点、使用する上でのノウハウなどをまとめた冊子の第２版を作成しました。 CUD_color_set_GuideBook_2018
“表紙あるある”の知恵がこのタグに集結！ #それっぽくなる表紙 - Togetter
🐕️ @54jpd09 今まで作った表紙だが… 一枚目：絵に文字を重ねて後は揃えとけ 二枚目：正方形で揃えとけ 三枚目：タイトル斜め、写真はぼかしてりして効果的にしとけ #それっぽくなる表紙 pic.twitter.com/SOOvvkYgFH
【保存版】デザインを学ぶすべての人に贈る、配色アイデア見本101選
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。 配色は、どんなデザインでも見る人の認識を形成しながら、雰囲気やトーンを設定します。単色や明るい、涼しい、暖かい、または補色であれ、すべての色合いがデザインの役割を果たします。 デザインに適した色を見つける作業は難しいことです。そこで、配色の参考にしたい101種類の色の組み合わせをまとめています。各カラーパレットは、Shutterstockのイメージ画像にインスパイアされており、HEXコードも一緒に記載しているので、ウェブデザインやソーシャルメディア広告、Eメールデザインなど幅広く利用できます。 コンテンツ目次 1. 単色系カラーパレット 2. 寒色系カラーパレット 3. 鮮やかなカラーパレット 4. 暖色系カラーパレット 5. 補色系カラーパ
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
ついにWindowsへ導入が始まった「Fluent Design System」5つの基本要素
10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System（フルーエントデザインシステム）」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design（マテリアルデザイン）など既存の言語を実装して、統一のとれた堅牢なユーザーエクスペリエンスを提供しているリーディングカンパニーが増えてきました。デザイン言語を、直感的・魅力的で見栄えの一貫したアプリやWebサイトを作成できる「確立されたガイドライン」と考えてください。 最近マイクロソフト社は、Windows 10ベースのデバイスにおける広範な使用（つまりユニバーサルWindowsプラットホーム（UWP）アプリ対応）を目的としたFluent Design System
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
自分のデザインのスキルがチェックでき、勉強にもなるクリエイティブなゲームのまとめ
カラーの見極め、文字の美しい字詰め、図形の認識など、デザインに大切なスキルが自分はどのくらいなのか分かり、しかも勉強にもなるスキルチェックのゲームをまとめたサイトを紹介します。
見ないと絶対損する！プレゼン資料の印象がグッと上がる良質記事10選 | SIROKグロースハックブログ
誰もがかっこいいプレゼン資料をつくりたいと考えていますが、とても難しいことです。今回はプレゼン資料の印象を簡単によくする方法について書かれた記事をまとめました！ 伝わるデザイン｜研究発表のユニバーサルデザイン どうすれば伝えるデザインにできるかについてとても分かりやすく説明されています ビジネスデザイナーZIBA濱口秀司さん のシンプルな図解とフレームワーク プレゼンにも活かせるシンプルで伝わる図解について分かりやすく書かれています。 パワポでの提案書作りに役立つデザイン基礎知識まとめ 時間をかけずに優れたプレゼンを作れる方法が載っています。ビジネスマンにおすすめです プレゼン資料の印象がグッと上がるフォントの法則 フォントの使い方一つでプレゼンの見た目が大きく変わります。 [Webデザイン] 文字組みについて本気出して考えてみた 文字組みの仕方でプレゼンの印象は大きく変わります レイア
続・よくある3つのデザインから考える、マークアップの最適解
マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初
マーケティングにおける色彩心理学の本当の使い方
by Tiger Pixel マーケティングにおいて色彩心理学を利用することは重要とされますが、色彩の持つ効果は個人の経験に依存し、学術的に裏付けされたデータが少ないため、議論も多いところです。そこでHelp Scoutがブログで研究によって明らかにされた色彩の持つマーケティングでの効果をまとめたのが「The Psychology of Color in Marketing and Branding」で、実際に商品を売り出したり、ウェブサイトをデザインする際にも非常に役立つ内容となっています。 The Psychology of Color in Marketing and Branding | Help Scout https://www.helpscout.net/blog/psychology-of-color/ ◆色彩心理学に関する誤解 どうして色彩心理学は多くの誤解を含み、そして
自称WEBデザイナーさんへ
WEBデザイナーから上がってきたデザインが酷すぎる。 事前にコンセプトやテイストを伝えて、参考サイトのURLも送った。丁寧に強調したい部分とか、写真の意図も伝えた。予算も作業時間にも無理がないか確認した。 それなのに、送られてきたデザインは、私の作った白黒のワイヤーフレームに色やグラデを付けて、ちょっとレイアウト調整して、フォントを新ゴにしただけ。 これが「デザイン」ですか？メインキャッチを新ゴで書くことが、デザインですか？強調したいと言った部分を赤にすることが、デザインですか？指示した写真をトリミングもせずそのまま配置することが、デザインですか？ 思わず言ってしまった。「これ、まだ途中ですよね？」 いや、私の仕事の中に「スタッフが気持よく仕事できる環境を整える」ことが含まれているのはわかっている。分かっていても、嫌味を抑えきれないほどの酷さだった。それでもなんとか「あ～すみません、時間な
第1回 iPhoneアプリとAndroidアプリのデザインの違い（前編） - MdN Design Interactive
第1回 iPhoneアプリとAndroidアプリのデザインの違い（前編） 解説・文：秋葉ちひろ iPhoneアプリのようなAndroidアプリ Androidアプリの開発者と話をすると、「制作してもらったデザインがiPhoneアプリそのままなんです」という声を耳にします。そして、話をよく聞いてみると、どうやらそのデザイナーはAndroid端末を持っていないようなのです。私のこれまでの経験として、デザイナーの方が持つスマートフォンは主にiPhoneを使用していて、逆にAndroidを使っているデザイナーは少ないと感じています。例えば、遊びでAndroidアプリを作るならいいのですが、仕事として受注しアプリ制作をする場合、Android端末を使ったことがないというのは大きな問題だと思います。 私が重要と捉えていることのひとつに、Androidアプリの開発に携わる人は、開発者だけではなくデザイナ
Androidの画面サイズを攻略して機種依存を吸収する(ナビゲーションバーとステータスバーのサイズを取得する) | TechBooster
※上記の名前付けは一般的なものではなく、今回の解説用に定義した名前です。（Displayクラスのサイズといえばどれもディスプレイサイズということになるため、わかりやすさを優先して図示しました) 特にステータスバーとナビゲーションバーは端末ごとカスタマイズされている可能性もあるため、動的に取得するのが望ましい項目と言えるでしょう。しかしながら、直接この2つの高さ情報を取得するAPIは存在していません。踏み込んで解説するならば、これらはアプリケーションの領域外でありアプリが気にする必要はなく、気にしないでいられるデザインやレイアウトを検討すべきである、という設計思想がうかがえます。設計思想を尊重するならば、このあと解説するAPIをなるべく使わないでいいように工夫できると機種依存の苦悩から解放されるでしょう。 取得する方法は続きから ナビゲーションバーを除いたディスプレイサイズを取得する ディス
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントの選び方・使い方
Open Color
新着記事
ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ | コリス