なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
エンジニアでも知っておきたいデザインの基礎知識 - Qiita
→ English 対象読者 ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。 また、デザイン経験は無いけど、個人開発で何かプロダクトを作ってみたい方にも参考にしていただけるかと思います。 デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでワイヤーフレームレベルのものをプロダクトとして最低限機能するレベルに引き上げるまでの範囲について言及します。 概要 最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。 そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。 この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデ
作りたいWebアプリのアイディアを迷走せずに作る方法。まず、エディターを閉じることから始めよう - Make組ブログ
何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作
Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating
RFC 7807: Problem Details for HTTP APIs
Internet Engineering Task Force (IETF) M. Nottingham Request for Comments: 7807 Akamai Category: Standards Track E. Wilde ISSN: 2070-1721 March 2016 Problem Details for HTTP APIs Abstract This document defines a "problem detail" as a way to carry machine- readable details of errors in a HTTP response to avoid the need to define new error response formats for HTTP APIs. Status of This Memo This is
ランキングの設計はどうあるべきか？｜深津 貴之 (fladdict)
「発見性」の強化のために、noteにランキングやホットエントリーに類するものをつけたいと思っている。しかしランキングやホットエントリーは、世間で思われている以上にデリケートなUIであるため、その設計は慎重に行われなければならない。下手な設計は、サービスのカルチャーそのものを破壊しかねないためである。 以下は、ランキング設計のための忘備録。 PVランキングは収奪的な設計であるPVランキングを設計する場合、まず最初に意識すべきことがある。それは本質的に、PVランキングは収奪的な構造であることだ。 「収奪的」とは、勝者が全てを独占してしまうことを意味する。 基本的にランキングに上位のコンテンツは、ユーザーの注目を獲得する。つまり、PVのあるコンテンツはランキング上位となる。そして上位コンテンツはその露出によって、さらにPVを集めてしまう。 結果、PVランキングは少数のコンテンツにPV、フォロワー
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
エンタープライズ向けBootstrap：PatternFlyの紹介 - Qiita
PatternFlyの日本語資料が非常に少ないので、紹介記事を書いてみる。 PatternFlyとは PatternFlyはRed Hatがスポンサーをしている、オープンソースのWeb UIフレームワーク。Bootstrap 3をベースにしている。 Bootstrapは、Webの汎用コンポーネントを集めたCSSライブラリだが、とくにWeb系のB2Cなサービスで使われているように思う。PatternFlyはRed Hatがスポンサーしているだけあって、エンタープライズ向けに特化していて、B2BなサービスやWebアプリケーションで使われることを想定した、一段高レベルのウィジェットやレイアウトがライブラリとして提供される。 なお、名前からも分かるように、元々はアプリケーションサーバのWildFlyの管理コンソールなどで使われていたUI部品を統合して再利用しようという試みから生まれた。 パターンラ
AppleのiCloudアイコンの作り方。リアルな立体感や金属の光沢を表現する。 | GIMP2の使い方
削り出した金属の質感がかっこいいiCloudアイコンの作り方を紹介します。金属を彫りこんだような立体感や、削り出しの表面の質感の出し方は、アイコン以外でも使いどころがありそうです。 画像加工のおおまかな流れ 先におおまかな作業の流れを書いておきます。詳しい説明は次の「画像加工の手順」からです。 記事の最後で完成版もダウンロード頂けます。
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
Webで仕事をする人全員に知っておいてほしい文字詰め・カーニングの基礎知識 | 株式会社ZINE
株式会社ZINEの仁田坂です。編集者ですがデザインするのが好きです。 自己主張しすぎな圧倒的アイキャッチで失礼しました。今日はフォントと文字詰めの話をします。ぼくは雑誌編集者として数年働いた後にWebメディアをつくり起業、みたいな感じで働いてきたんですけれども、編集もデザインけっこう似ている部分が大きいと思っています。文字で読者に伝えるのか、視覚情報でユーザに訴えかけるのか。 結局のところ同じだよなあ、と思ったりします。編集もデザインも一緒くたにして考えたほうが都合いいことが多いです。 で、けっこうWebメディア見てると残念なデザイン、多いんですよね。 Webフォントでタイトル設定してるメディアは気にならないんですけれども、アイキャッチ見ると最悪……みたいなの多い。以前GitHubでアイキャッチ用のテンプレートを公開したもんだから、形だけ真似してデザインがてんでなってないメディアが増えまし
優れたフォームをデザインする
サインアップのフローであれ、マルチビュー・ステッパーであれ、ありきたりのデータ入力であれ、「フォーム」はデジタル・プロダクト・デザインにおいて最も気を遣わなければならないものの1つです。 そこで、今回は一般的にフォーム・デザインで何をやり、何をやらざるべきかについてお話したいと思います。あくまで一般的なガイドラインですので、そのようなものとしてご理解頂いた上で、皆さんの参考になれば幸いです。
ちょっと意識するだけで劇的によくなるデザインの7箇条 - Brian'z Imagination
ちょっと前までは企業ではお抱えのデザイナーがいたし、デザインの専用ツールも比較的コストが高く、デザインはデザイナーに任せるべき、という風潮が強かったと思う。時が経過した今では、デザインする時間がなければクラウドソーシングに投げればいいし、PhotoshopやIllustratorなどのツールも月額購入で誰でもすぐに利用できるし、Webには日々参考になるリソースが流れてくるので、ノンデザイナーでも簡単にデザインすることができるようになった。 しかしながら、参考記事を見ながら見よう見まねでデザインをしたものの、自分の作ったデザインはプロのデザイナーと「何か」が違う、そう思ったことはないだろうか。センスと経験だけでは、なかなか見えないデザインのポイントが存在する。 そこで今回は、そんなプロのデザイナーなら無意識にチェックしている7つの項目を並べて紹介していこう。デザインというと高尚に聞こえる節が
超クールなイマドキのダッシュボードのUIデザインまとめ | SHINGO IRIE
プログラマといえど、管理者が使うものといえど、美しい機能美でまとめられたダッシュボードをつくりたいものです。今回は、参考になりそうな美しいダッシュボードを集めてみました。 クールなダッシュボードデザイン集このくらいシンプルなのが好みです。 Gear Admin UI v2 Analytics系。数字の比較や計算が多いものに向いてそう。 Some Analytics 比較的オーソドックスに使えそう。最近、わりとこういうダッシュボードデザインが多いですね。 Dashboard Web App Product UI Design: Job Summary グラフの見せ方が個性的。 To-Do Dashboard サーバーのダッシュボード。 Server Dashboard カラーを統一するのも綺麗にみえます。 Dashboard Overview Screen トップメニューにすることで、画面を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pingendo
GIMP2の使い方
Material Design
マテリアル デザインのガイドライン（日本語版）