【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新｜ryota_funakoshi
【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新 こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から 「どこから画像を引っ張ってくればいいかわからない😭」 「日々の情報収集どうすればいいの？🤔」 という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！ 日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
配色に迷ったらこれ！配色イメージを言語化して論理的に伝えられるスケールがめちゃくちゃ役に立つ「語彙力ない私にうってつけ」
リンク www.ncd-ri.co.jp イメージシステム | カラー戦略の専門家 | NCD-WEB | 色彩心理・生活者研究・トレンド分析の日本カラーデザイン研究所 日本カラーデザイン研究所はオリジナルのカラーシステム「HUE&TONEシステム」やイメージ分析システム「イメージスケール」を開発、発展させてきました。 62 users かたおか＠LP専門Webデザイナー / 著者 @kataokadesign 「Webデザインを学び始めたばかりで配色がうまく決められない」という悩みがあるなら、日本カラーデザイン研究所のイメージスケールを活用すると良いでしょう。 各キーワードに関連する配色が体系化されているので、配色で大失敗する可能性はひとまず減らすことができます。 ncd-ri.co.jp/about/image_sy… pic.twitter.com/QTfzBpQ2EL 2020-1
デザインに便利なツール18選｜かずたか
※はてブの総合ホッテントリと、noteの公式マガジンに入りました！ こんにちは。Kazutaka Shimizuです。
“シリコンバレーを作った人物の1人”と称され、故スティーブ・ジョブズ氏が頼りにした人物がいる。 レジス・マッケンナ氏。 半導体関連の企業で働いたあと、70年代にみずからのマーケティング会社を設立した、マーケティングのプロだ。 あるときマッケンナ氏は、うわさを聞きつけたジョブズ氏から電話でコンタクトを受け、ジョブズ氏、そしてエンジニアのスティーブ・ウォズニアック氏との打ち合わせにのぞんだ。 相談は「アップルII」（1977年発売）というコンピューターのマーケティングについて。 ジョブズ氏らは、製品についての記事を雑誌に載せる方針を明かした。 マッケンナ氏は、その内容があまりに専門的で、一般の消費者には受け入れられないと感じ、「市場を広げたいなら、自分と同じようなタイプの人たちに発信するのではだめだ。記事は書き直すべきだ」と助言した。 ところが2人はその意見を気に入らず、部屋を出ていってしまっ
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
Explore DOM Events
There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。 正方形の写真をCSSで変形させました 上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
一つの画面に二つの電卓が並ぶいっぷう変わったアプリが、米アップルのスマートフォン「iPhone（アイフォーン）」と、タブレット端末「iPad（アイパッド）」で公開され、人気を呼んでいる。その名は「ダブル計算機」。開発したのは、兵庫県の63歳の男性だ。リリース後しばらくはダウンロード数が伸び悩んだが、ある改良を加えたことで数が大幅に増えた。その一工夫とは――。【後藤豪】 まず、機能を確認しておこう。画面中央に表示される「→」や「←」の矢印キーをタップすると、計算結果をもう一方の電卓に移すことができる。たとえば、片方の電卓で「89×15＝1335」を計算し、矢印キーをタップすることで計算結果の「1335」がもう一方の計算機に表示される（写真1）。そこから計算を続けられる。入力した計算式が表示されたままなので、ミスに気づきやすい。 また、それぞれの計算機で別々の計算をすることも可能だ（写真2）。
AmazonのUIがダークパターンすぎて酷すぎる
AmazonがEvilに染まっていく… 購入手続きのときに、急にこんな画面が挿入されてきたんだけど、 https://tadaup.jp/55aeed90d.gif こんな絵に書いたようなダークパターンある？？ 「お急ぎ便を無料で利用できます」と書いてあるけど、 小さく「会員は\600円/月で特典使い放題」と書いてある。 つまり、「600円払えば無料だよ」と言っている。つまり、無料ではない。 読解力を測るテストで間違えるような人は、もうこれ読み取れないだろ。 しかも、その下のボタンである。 一見すると、ボタンが2つ並んでいる。 YesとNoのボタンなのかと思いきや、なんと、これはYesとYesである。 「Yes か はい で答えてください」というジョークを素でやっているのが、今のAmazonなのである。 では、Noのボタンはどこにあるのかと、画面中をよく探したら、左側に、普通のテキストの見
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
なぜWebサービスはUIの改悪を繰り返すのか
自分はWebサービスの表側を作るお仕事に就いていますが、日本人ってサービス系の開発に向いてないよなーと強く思います。 特にWebサービスやアプリについては、まじで向いてない種族だと思います。 一番アカンなーと思うのが、リリース後の開発において機能追加は精力的に行う一方、機能削減はぜーんぜんやらないんですよね。 Webサービスって、リリース直後の段階である程度しっかりとしたUIで組まれていて、機能追加のことは基本的には考慮されていないケースが多い印象があります。 そのせいか、機能が追加されればされるほどいびつなUIとなっていって、最初は見やすかったのに、どんどん見づらくなっていくという…。 そうなってくると途中で全面リニューアルを行わざるを得ないことになるんですが、その頃には元のコードはぐっちゃぐちゃになっているわ元いたエンジニアはやめてるわてんやわんやで、もうどーしようもない状態になってい
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
車のペダル踏み間違い事故１０年で６万件、４５０人死亡 若年層が最多（神戸新聞NEXT） - Yahoo!ニュース
アクセルとブレーキの踏み間違いなどで死傷者が出た交通事故が、２００８～１７年の１０年間に全国で６万件以上発生し、４５０人が死亡したことが警察当局への取材で分かった。兵庫県内では同じ期間に２１３３件の事故があり、２６人が亡くなった。神戸市中央区で４月下旬にあった市営バスの事故も、ペダルの踏み間違いが一因とされる。高齢者だけでなく、１０～２０代の若者による事故も多く、対策が求められそうだ。 【動画】捉えていたバス暴走事故の瞬間 警察庁や県警によると０８～１７年、アクセルとブレーキの操作ミスによる事故で全国では年間約６千～約９千人が負傷し、２７～６０人が死亡した。県内は１８３～４４７人で、１２年を除き死者は１～６人だった。 誤操作した運転手の年代をみると、実は１０～２０代が１万６１８８人（２６・９％）で最も多く、次いで７０歳以上の１万４６２３人（２４・３％）。県内では７０歳以上が５４１人（２５・
「ゲームのロード」のために“主人公をわざと転ばせる”PS1ゲームの工夫が話題を集める。意外なかたちで紐解かれる真実 - AUTOMATON
ゲームが動作するうえでは、データを読み出すローディングがつきもの。開発者は、ロード時間をなるべく短くしたり、プレイヤーに感じさせづらくしたりと、さまざまな工夫を施しているようで、そうした工夫の一例がSNS上で注目を集めている。 TwitterユーザーMIYAKE氏は10月17日、PS1向けに1998年に発売されたRPG『どきどきポヤッチオ』のロード処理方法についてTwitterにて紹介した。同氏は、いまから17年位前の新卒2年目の時に、先輩との雑談のなかで本作のロード処理について教わったそうだ。 先輩「プレイヤーがつまづいてコケるんだ」 先輩「つまづいて転んで、起き上がる間にデータをロードするんだよ」 頭に電流が走るぐらいの衝撃を受けました。 プレイヤーは小学生の男の子… 走れば走るだけ（移動速度が増すほどに）コケやすくなる… ユーザは自然と走り過ぎないように気を付ける… — MIYAKE
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。 これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好
Androidってダサい
iPhone 3Gでスマホデビューして以来何年かに一度機種変更しつつずっとiPhoneユーザーで今はXS maxで止まってるんだけど、最近仕事の関係でGalaxy Z fold3 5Gという端末が今手元にある。 みんなも一度くらいはヨドバシとかで触ったことがあるかもしれないが、スマホなのにパカパカと折りたたみが出来る近未来的かつ俺くらいの世代には懐かしさもあるやつ。 普通のスマホが横にパカっと開いてkindleとかiPad miniくらいの小さめタブレットくらいになるモデルで、俺としては慣れないAndroidのUIに戸惑いつつも大画面ってなんか楽しいなと思いながら、ここ数日使ってたわけよ。 そして昨晩、ベッドに入ってGalaxyをパカっと開けてはてブでも見るか、と思ったらさ、横から妻が「なんかそのパカっと開くのおじさんみたいだね」と。 その時はハハっと愛想笑いで話を膨らませずに終わらせたん
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
みなさん、こんちには 【watnowテックカレンダーの23日目】 今日はwatnowのしゅいが担当します よろしくお願いします はじめに 今回は普段私が資料作りなどの際に利用している デザインの参考サイト,フリーのイラストサイト,配色のサイトを紹介します 今回紹介するサイトは全て無料で利用できます デザイン参考 1,pinterest URL:https://www.pinterest.jp ピンタレストは画像のSNSのようなものでネット上の画像を自分の「ボード」に 「ピン」して集めたりできる画像をブックマークとして集めるツールです パワポデザインなどと検索してデザインのアイデアを見つけたりして マネして作ってみるのもありです 2,dribbble URL:https://dribbble.com/ dribbbleはアメリカで生まれたサービスで、招待された人しか画像の投稿ができないため
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。
間違っていたって構わない、だから言語解読アドベンチャー「7 Days to End with You」は今の時代に遊ばれるべき傑作ゲームなのだ
また、大好きなゲームに出会ってしまった。その名も――「7 Days to End with You」（iOS／Android／Steam）。知的で、エモくて、切ない。心の大事な場所にしまっておいて時々取り出して眺めたくなるような、そんな一本だった。 「7 Days to End with You」タイトル画面） ライター：砂義出雲 作家・シナリオライター。はてなダイアリー「やや最果てのブログ」の運営を経て、2011年に小学館ライトノベル大賞・優秀賞を受賞し『寄生彼女サナ』でデビュー。なんだかんだ10年以上業界の片隅でラノベを書いたりゲームシナリオを書いたりしてきました。映画とゲームとsyrup16gが生きる糧。人生ベストゲームは「Outer Wilds」です。 Twitter：@sunagi 全く新しいパズル＆ノベルゲーム体験 本作は、iOS版＆Android版が2022年1月24日に、S
By rawpixel.com コンピューターの周辺機器を接続するための規格「USB(ユニバーサル・シリアル・バス)」のほとんどには裏表があり、「おや、刺さらないぞ…… 逆向きか！」となることがよくあります。うっかり逆向きでUSBを差し込もうとしてしまうたびに「なんでこんな設計にしたんだ！」と毎度のように怒りを覚える人もいるはず。そんなUSBの開発者エージャイ・バット氏が「USBコネクタに裏表がある理由」を明らかにしています。 Ever Plugged A USB In Wrong? Of Course You Have. Here's Why : NPR https://www.npr.org/2019/06/21/734451600/ever-plugged-a-usb-in-wrong-of-course-you-have-heres-why Intelは1990年代後半に、マウスや
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
サイゼリヤが新しい注文方法を導入している。これまでは、各テーブルに置いてある注文用紙に利用客が番号を記入して店員に渡すスタイルだったが、どのように変わったのだろうか。筆者が都内の店舗で体験した内容を交えながら解説する。 テーブルで見つけた小さな「札」 入店後、店員に案内されてテーブルに移動すると、長方形の小さな札を見つけた。札には「いらっしゃいませ」「テーブル番号24」「注文用QR」といった情報が記載されている。見た目は、小売業界で導入が進んでいる電子棚札（画面が電子ペーパーになっており、価格などをリアルタイムに変更可能）に似ている。「この小さな札は何だろう？」というのが最初に見たときの感想だ。
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
【Next.js Update!】v12リリースを踏まえ、Next.jsの採用を考える 本発表は以下URLでアーカイブ視聴が可能です。https://youtu.be/KaS3bgz_CA4 イベントページ：https://forkwell.connpass.com/event/228457/
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
「使い方を聞かれてもわからない」スマホに慣れてないお年寄りは高齢者向けのスマホより『iPhone』を選んだほうがいいという話
マツモトケイジ@ジオグラフィカ開発者 @keizi666 スマホに慣れてないお年寄りはiPhoneを選んだほうがいいです。楽々スマホとか買われると、僕らが使い方分からないので使い方を聞かれても教えてあげられません。設定とかアプリ一覧を出すのにも一苦労でした。マジで楽々スマホはやめて。使い方を誰かに聞くつもりなら絶対買っちゃダメ。 2019-12-17 13:30:12 マツモトケイジ@ジオグラフィカ開発者 @keizi666 新し目のAndroidでもいいんだけど、Androidはどうしたってエンジニア目線のOSで、ホーム画面とアプリ一覧が別になってて（機種によって違うけど）、インストールしたアプリがどこに行ったのか探しいにくい。iOSはホーム画面にどんどん追加されていくので探しやすい。 2019-12-17 13:54:26 nasa @narsak0516 @keizi666 どちらか
医師は情報が詰めこまれたスライドが好き？こんにちは、株式会社CureAppデザイナーの小林です。精神科の医師ですがデザインが好きすぎてデザイナーとして働いています。 医療の世界から会社員に転身すると、日々さまざまな発見があります。先日社外の人とプレゼンテーションの話題になり 「医師向けのプレゼンでは、シンプルなものより情報が詰め込まれたスライドが好まれるんです」 と言われ驚きました。 たしかに医療系のスライドは医師に限らず文字が詰めこまれた分かりづらいスライドが主流ですが、それはデザインへの関心が低いだけでけっして「好き」なわけではない、そう思っていました。 しかし改めて「もしかして医師は本当に複雑なデザインが好きなんじゃないか？」という疑念がわいてきました。 よく見る医療系スライドの一例 https://www.dinf.ne.jp/doc/japanese/resource/kouse
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインは、見た目じゃない | NHK | ビジネス特集
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
管理画面のUIデザインにおける20の改善ポイント | knowledge / baigie
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
ヒットアプリ「ダブル計算機」って？開発者は定年後の63歳男性 | 毎日新聞
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
フロントエンドの刺激的なコーディング課題6選 - Qiita
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ
時短してますか？Web制作が変わる最新オンラインツール38個まとめ
【2021 最新版】ノンデザイナーだからこそ知っておきたかった10のイラストサイト - Qiita
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax
日立ビルシステム、「片側空け」を抑止する新型エスカレーター。大阪・関西万博の夢洲駅に設置
「USBに裏表がある理由」をUSBの開発者が明かす - GIGAZINE
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
「この小さな札は何？」 サイゼリヤの注文方法が激変！ 「メニュー番号を手書き」からどう進化したのか
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
医師とデザイン。なぜ医療現場は複雑なUIが好まれるのか？｜Kei Kobayashi｜note
b.hatena.ne.jp
esusokuhou.blog.jp
esusokuhou.blog.jp
esusokuhou.blog.jp
esusokuhou.blog.jp
esusokuhou.blog.jp