米政府系サイトの常識を変えた「デザインシステム」革命
官僚主義からスタートアップ精神へ——。およそ10年前、新サービスの立ち上げ失敗を機に生まれた米国政府の新組織が作ったWebデザインシステムは、今では160サイト・11億ページビュー規模にまで広がりを見せている。 by Jon Keegan2024.07.03 412 9 この記事の3つのポイント 米国には公共デザインシステムとカスタムフォントがある 政府系Webサイトのアクセシビリティと一貫性を高めることが目的 これらのプロジェクトでは透明性や協働、継続的な改善が重視されている summarized by Claude 3 米国には、公式のWebデザインシステムとカスタムフォントがある。この公共デザインシステムは、政府のWebサイトを単に美しいものにするだけでなく、すべての人にとってアクセスしやすく機能的なものにすることを目的としている。 インターネットが普及する以前、米国民は印象的な石柱
私がWEBデザイン制作の参考になりそうだと思うサイトを61個挙げてみた。
日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを おすすめ度 サイト内検索の可否 いいね/保存機能の有無 ランキング機能の有無 掲載サイト数 を基準にランクづけし、おすすめできるサイト順に載せているので忙しいという方は、とりあえず上から順にチェックしていただければ大丈夫です！みなさんのデザイン制作に活かしていただけると嬉しいです。 【全サイト徹底比較】超参考になるおすすめギャラリーサイトTOP38 ちょう
ToDoリストを作っても動けない、締め切り直前に急いで対処… 時間管理における課題と、忙しくて“後回しになりがちなこと”
効果的に時間管理を行うには？ 篠田真貴子氏（以下、篠田）：私の課題はさておき、例えば1週間の中で日にちを割っていくとか、1日の中での時間の使い方もあるし、そもそも時間をどのユニットでとらえて、どうチャンク分けすると自分は心地良いのかって、けっこう人によって違うと思うんですよ。 倉貫義人氏（以下、倉貫）：わかるわかる。違いますね。 篠田：お二人はどうなのかなって、今日は聞いてみたいなと思いました。 倉貫：最近はやれてないんですが、僕はストレングスファインダーで言う「達成欲」を持ってるので、朝に1日の予定を自分で立てるんですよ。1時間ごとに「こういうことやる」と書いて、それを達成できたらその日は気持ち良く寝れるというのをやっていて。 でも、そうするとすごくがんばらなきゃいけないので、最近はちょっと体力も落ちてきて（笑）。「そんなにがんばれなくなったな」というところがあって、そこまでやらなくなっ
マネジメントの「もぐら叩き」からいかに抜け出すか。ミドルマネージャーが心得ておくべき「問いのデザイン」の新原則とは？｜安斎勇樹
経営層の方針をチームに伝え、実行に移すミドルマネジメントの現場において、「問い」のデザインがますます重要になってきていると感じます。 本記事では、2023年10月に開催し、大変好評だったウェビナー「チームを覚醒させる「問い」のデザイン：新時代のミドルマネジメントの真髄」の内容より、「問い」を活用したミドルマネジメントの新原則について、ケーススタディとともにご紹介します。 『問いのデザイン』の大幅アップデートを目指して2020年に刊行した『問いのデザイン』の出版から4年近くが経ち、内容の改訂を検討しはじめています。特に組織の課題解決を担うミドルマネジャーに向けてコンテンツを肉付けし、アップデートに取り組んでいるところです。 きっかけは、2023年10月に開催したウェビナーでした。2023年6月にはじめて開催した一般向け大型ウェビナー「新時代の組織づくり」が非常に好評だったことを受け、その第二
テキストだけでウェブサイトが作れる！ 最新AIツール3選 | ライフハッカー・ジャパン
サイト作成にあたっては、さまざまな質問に答えていくことになります。 たとえば、「ウェブサイトにはどのようなタイトルをつけたいのか」「どのような内容のウェブサイトにするつもりか」「どのような機能が必要か」「特に伝えたいメッセージはあるか」といった質問です。 やりとりは、ChatGPTやGeminiを相手にする場合と大差ありません。 また、プロンプトごとに、AIに質問を言い直させたり、答え方を教えてもらったりできます（つまり、こちらが言うことの選択肢を提案してくれるわけです）。 そのほか以下のような特徴があります。 ウェブサイトの外観が生成されるたびに、微調整を加えたり、ゼロからやり直したりが可能細かい部分は思いどおりにならないWixとWix ADIは、無料で利用できますが、月額17ドルからのプレミアムプランもあり（日本語版は1200円の「パーソナル」プランから）。FramerFramerなら
mikanデザイナーの"スクラムで回す1週間"を覗いて行きませんか？｜Ayaka Nagataki
はじめにこんにちは！株式会社mikanでデザイナーをしているayataki（@ag_ayakan）です。 主に英語アプリ「mikan」の体験設計やUIデザインの作成を行なっています。 カジュアル面談などで話す際に、「mikanのデザイナーさんてどんなことをやってるんでしょうか？」という質問をよくいただくようになりました。 社外への発信が少ないこともあり、イメージを持ってもらいづらい状況にあるのではないかなと感じています。 そこで今日は、mikanのデザイナーとして働くわたしの1週間のスケジュールについてご紹介します！実際にあった直近のスケジュールを具体例に出していきます。 mikanのデザイナーに少しでも興味のある方に、具体的なイメージを持ってもらえたら幸いです🍊 それでは行ってみましょう！ [前提] 仕事の環境ほぼリモートワーク mikanのメンバーは基本的にフルリモートワークで働いて
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
『はじめよう！ 要件定義』（とそのシリーズ）を読んで、はじめよう！UIデザイン｜金 成奎
『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
｢センス｣は生まれ持った才能ではない…センスのいい人が日常生活の中で実践している2つの習慣 デザインの制作意図は6パターンに分類できる
センスを身につけるための2つの能力 街中にある看板や企業のポスター、道路の標識、電車内の広告、商品パッケージ、WEBサイト……私たちの身の回りには、ありとあらゆるところに数えきれないほどのデザインが溢れています。普通の人にとっては「オシャレだなぁ」とただ眺めるだけでスルーしてしまうもの、あるいは「煩わしい」と感じるものかもしれません。 一方で、プロのデザイナーにとってはデザインセンスを養う教材のひとつとなっています。日常生活で目にするデザインには、ひとつひとつに制作者の意図やこだわり、伝えたいメッセージが込められているからです。 デザインを意識的に「見る力」、そのデザインが施された意味を想像・考察して「言語化する力」を身につけることでセンスが磨かれ、実践の場で活かせるようになります。 「赤色」に着目したときに見える世界 それでは一度、この記事を読んでいる画面から目を離して辺りを見渡してみて
Figma でデザイン、そのままデモ、そのまま実装！ - Qiita
みなさん、デザインツールの Figma を使っていますか？ 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位
ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
タスク指向のデザインはなぜ生まれるのか？
『タスク偏重のデザインはなぜ生まれるのか？』の続きです。 簡単だから 画面を見て悩むデザイナーが「全体はよくわからないから別にしてこの中だけ作るか」と言いながらボタンの先に画面を連ねようとしている オブジェクト指向のUIにするには手順を解体し、オブジェクトを中心に構造化する必要があります。重複しているものはマージし、必要に応じて新しいオブジェクトを定義したり新しいイディオムを検討することもあります。 （例:「簡単に新規作成する」という機能に対して複製、テンプレート、マスターというイディオムを検討する） これらはそれまで作ってきたものとうまく整合するようにしなければいけませんし、整合しないならどこをやめたら全体としてひとつの形にできるのか考えることになります。これは大変です。 対してタスク指向のUIデザインは簡単です。 新しいタスク用に新しい入り口を作って、必要な入出力を線形に並べ、例えばウ
失敗から学ぶAPIファースト / API first learning from failure
Presentation Slides for ServerlessDays Tokyo 2023 ( connpass) Session Title: 失敗から学ぶAPIファースト ~ 正しいデザインからはじめるアーキテクチャ選定、開発ライフサイクル＆コラボレーション Session Video: [ServerlessDays Tokyo 2023] 失敗から学ぶAPIファースト / 川崎庸市 Date: 2023/09/23 Update history - 2023/09/24: fix typo - 2023/12/13: p19 表現を更新「APIファースト」→「APIファースト開発モデル」
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
Image credit: Relume ワンセンテンスの Web デザインは、もはや夢物語ではない。Wix、Weebly、Webflow のテンプレートを使えば、自分のスタイルで Web サイトを組み立てることができる。 しかし、これはレイアウトに限ったことではなく、Web サイトの構成を考え、各ページの内容も、訪問者を惹きつけるために慎重に設計する必要がある。例えば、「About」ページでは、サービス紹介やビジネスストーリー、将来のビジョンなどを掲載するため、コンテンツの設計に手間がかかる。 この問題を解決するために、デザインスタートアップ Relume は、AI が生成する Web サイトデザインプラットフォーム「Relume Ipsum」を開発した。これにより、数週間から1ヶ月程度かかっていた Web サイトを完成させるまでの作業負荷をわずか数分にまで軽減することができる。このプロ
建築的には、上の方に書いている人がいるように、広縁だった空間なんだよ ..
建築的には、上の方に書いている人がいるように、広縁だった空間なんだよ でも雨が吹き込むバルコニーみたいなものだから、建物が平家ではなくなると、落下防止の手摺がつき、それに漏水しないように建具が設置されたの。そして縁側の幅しかない謎の空間になったんだよ。 その上、空間的に勿体ないから、テーブルと椅子を置き、コンセントを這わして冷蔵庫を置き、ついでに配管を回して洗面台まで置くところが出てきた 半外部としての空間的な意味は失われたけど、主室が外につながる間のバッファ空間として生き残ったんだ 生活様式が変わり、持家政策によって狭小敷地に建蔽率いっぱいに部屋を区切るようなった現在、縁側という空間的な余裕を使いこなすことができなくなった現代人には謎の空間としか認識できないモノが残ったんだよ もはや和室としての様式は失われて、ただ畳(のようなモノ)が敷いてある部屋を和室と呼んでいるように、床の間とかもT
図解がつくれると伝わり方が変わる！ 初心者のための図解作成ガイド【事例あり】｜鷹野 雅弘
「図解」は資料作成やプレゼンスライドの制作に欠かせません。その一方で「図解を作成してみたいけれど、経験がない」「これから図解をどんどん取り入れていきたい」という方のために、図解作成のノウハウを基本中の基本からまとめてみました。 今回の記事はアドビ社のPR企画「みんなの資料作成」に参加して執筆しています。 1 | 図解の定義まずは「図解」の定義について考えてみましょう。 たとえば、書籍『たのしいインフォグラフィック入門』の中で著者の櫻田 潤さんは次のように定義されています。 図解とは、単純な図形と短い言葉で、物事を説明するグラフィック 非常に明快ですが、人によって定義が異なりますし、また時代によって移り変わっています。 類語から「図解」の定義を探る言葉の定義を考える際に有効なのが〈類語〉を集めてみること。 そこで、日本語／英語に分けて、2つのマンダラート（9マスのメモ）をつくり、「図解」の類
スライド資料のデザインが劇的に良くなる！現場で学んだフォント・色の選び方｜fuyuna blog｜デザイン・ライフスタイル・キャリアについて書くデザイナーのブログ
「作りたい資料に適したフォントがわからない」 「どの色を選べばいいかわからない」 「スライド資料のデザインをもっと洗練させたい」 スライド資料をデザインするとき、こんな悩みを持つ方は多いのではないでしょうか？ スライド資料の印象は使用する「フォント」と「色」によって大きく変わり、うまく活用すれば見る人の心を動かし、行動を促す資料を作成できます。 そんな効果的な資料を作成するには、フォントと色の基本知識が必要不可欠です。それぞれについて学ぶことでデザインセンスが高まり、あなたのスライド資料に適した色とフォントを、効率よく選べるようになるでしょう。 ということで、この記事ではスライド資料のデザインに役立つ「フォント」と「色」の基本知識から、適切な種類を選ぶポイント、もっとデザインを学びたい方におすすめの書籍まで、フォントや色に関するノウハウをたっぷり紹介していきます！ デザインに苦手意識がある
エンジニアリングの必須図書 40冊 2023年版
はじめに 今回の記事では、私の独断と偏見でエンジニアリングにおける必須の書籍を、以下の分野に分けて40冊共有する。 Web開発 行動経済学 ソフトスキル その他 対象とする読者 プログラミング初心者 どの書籍から読み進めればいいかわからないプログラマー なにか新しい書籍を読みたいひと なんとなくタイトルが気になったひと Web開発 『リーダブルコード』 良質なコードの原則と具体的なテクニックを丁寧に解説している。プログラミング初心者はまずこれを読むべき。良質なコード―要は、メンテナンスしやすいコードを書く上で重要なヒントを教えてくれる。コーディングで一生役立つ知識が満載だ。何度読んでも決して色褪せることのない不朽の古典である。 『14歳からのプログラミング』 図解付きでプログラミングの基礎(例：変数、関数、条件分岐)を理解できる。小難しい専門用語が一切なく、初心者でも問題なく理解できるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
