なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
画像の「見やすい」「美しい」「バランスの良い」縦・横サイズとは？ - オービックネット集客BLOG
スマホやデジカメで撮影した写真をホームページ、ブログに掲載する時、テタ・コヨのサイズ気になりませんか？ バランスの良い画像サイズ、縦横比(アスペクト比)。 よくあるケースでは、バナーサイズが横240ピクセルと決まっていた場合、縦のサイズは？ そんた時は、迷わずバランスがよく、美しく見える以下のサイズから選定しましょう！ 1 : 1.414 (約5:7)白銀比 五重塔などの日本建築からハガキやA4,B4用紙など日本人には古くから馴染みのある比率として使われています。 1：1.618（約5:8）黄金比 紀元前古代ギリシャで発見されて以来、人間が最も美しいと感じる比率。名刺、Appleのロゴ、モナ・リザなどがこの黄金比が使われていることで有名。 3：2 一眼レフからフィルムカメラなどで使われている比率。個人的にはこのサイズ好んで使います。 4：3 コンパクトデジカメからパソコンのディスプレイなど
design/guideline/blog_share/Codeal Design Guideline (Shared) - esa-pages.io
CODEALのデザインガイドラインまとめ > Design PrinciplesDesign Principles 以下3原則(Clean/Persona/Efficiency)をDesign Principlesとする（ビジョン参照 ） Clean 対等な取引ができる副業プラットフォームづくりを目指すサービスとして、誠実さや信頼性をデザインを通じて担保する。 Personal 多様な情報をパーソナライズする。 Efficiency 効率的なワークフローを実現するために、快適なアクセシビリティを提供する。 > StyleStyle > ColorColor Logoに準じたカラーをプロダクト内に適用する プロダクトカラー Bootstrap定義 Bootstrapで定義されているcolor utility classesに各カラーを指定する。 > TypographyTypography
Adobe XD CC体験版ダウンロード | UI/UXデザイン、プロトタイプ、共同作業ツール
Creative Cloud の Web サイトからアプリケーションをダウンロードできます。プロンプトが表示されたら、お客様の Adobe アカウントでログインして、「ダウンロード」または「インストール」をクリックします。詳細については、「Creative Cloud アプリケーションのダウンロード」を参照してください。 「インストールに失敗しました」エラーの解決策には、「エラー： Creative Cloud デスクトップアプリケーションのインストールに失敗しました」を参照してください。ダウンロード、インストール、アップデートに関する他の問題を解決するには、「ダウンロードおよびインストールに関する問題のトラブルシューティングガイド」を参照してください。
Atomic Designの考え方と利点・欠点 – wkr.
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
※に関する記事
「プログラミングーデザイン」に関する記事一覧です。Webデザインをメインとした記事が勢揃い。デザインに興味のあるエンジニアや、デザインスキルを向上したいデザイナーの方におすすめです。 ZEXAVERSE ゼクサバースはWEB3.0を身近なものにZEXAVERSE（ゼクサバース）という企業を聞いたことはないでしょうか。この記事では、ZEXAVERSEの概要やZEXAVERSEのサービスなどについてくわしく紹介していきます。ZEXAVERSEについて知りたい方、興味がある方は是非ご覧ください。 Unity入門に最適なチュートリアルサイトまとめ・比較今回はUnityでのゲーム開発を始めるときに参考になる、入門チュートリアルサイトをまとめました。全くプログラミング初心者の方から、他のプログラミング言語で開発をしたことがある方を対象にまとめています。
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
＜操作説明＞ - 鳥獣戯画制作キット
猿、蛙など漢字をクリックすると画像オブジェクトが表示されます。画像オブジェクトはドラッグ・ドロップで動かせます。
「Webデザイン」とはなにか？ザックリ考えてみた（2013年）
「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。 はじめに このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。 「Webデザイン」とはなにか？じっくり考えてみた（2012年） 内容は「Webデザイン」の範疇を超えてるのですが、前回と同じタイトルにしてます。ただし、年末年始バタバタしてて時間掛けて考えることができなかったので、”じっくり”を”ザックリ”に変更してます。 また、この記事は2012年の総括や2013年のトレンドではなく、制作者の立場からWebについて今の自分が思ってることをつらつらと書いてます。なので、異なる意見があって当然だと思ってます。 読んでくれた方が「webデザイン」について考える一つのきっかけになっ
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
HTML5の最先端技術で顔文字はこんなにおもしろくなる
HTMLファイ部のしんちゃんです。よろしくぅ(^o^)/ 「顔文字」と「ASCII Art」はほとんど毎日使っていますが、 コードで表現するとどうなるのか考えたことはありますか？ jsdo.itでは「第三回HTML5実技コンテスト」が現在開催中です。 今回のお題は、HTML5で表情豊かに表現する「顔文字(・∀・)」です。 顔文字とASCII ArtがHTML5最先端の技術との融合は、 果たしてどんな結果を生み出せるかを考えたらワクワクしますよね。 ((o(´∀｀)o))ﾜｸﾜｸ では、さっそく投稿したコードをいくつか見ていきましょう！ HTML5で表情豊かに表現する「顔文字(・∀・)」 Gravity Face ※「▶Play」ボタンをクリック！
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
デザインを学びたい全ての方へ - 海外のデザイン学習リソース200選
「デザインに興味があるのですが、どうやってデザインを学べばいいのでしょう？」という質問は、以前に書かせて頂いた「米国のデザイン教育から学んだこと」という記事に対して一番多かった反響の1つでした。これはデザインの分野があまりに多様なためにどこから手を付けていいのか分かりづらいというのが原因のように思います。 そこで今回は情報全体を俯瞰出来るようにするべく、下記のそれぞれのカテゴリー別に、それぞれ有益なリソースをまとめました。このリストが皆さんのデザイン学習リソースとしてお役立てば幸いです。 海外のデザイン学習リソース 23のカテゴリーOnline Learning（オンライン学習）UI/Web:（ユーザインターフェイス／ウェブ）General（一般）Product（プロダクト）Branding:（ブランディング）Book Cover Design:（ブックカバーデザイン）Design Por
ユーザビリティを向上させる25のデザインの基本概念 デザイン会社 ビートラックス: ブログ
ビジネスにおけるユーザーインターフェイス(UI) や、ユーザーエクスペリエンス(UX)の重要性が頻繁に語られる事が多い。 Webサイトやアプリから始まり、自動販売機、券売機、車のダッシュボート、テレビ、トイレ、エレベーターのボタン配置に至るまで、”ユーザビリティー”と表現される ”使いやすさ” の大切さが注目を浴びている。 そして、その使い易さを生み出す最初の入り口がインターフェイスである。 インターフェイスとは、ヒトとデバイスとの円滑なコミニュケーションを達成するための媒介役であり、操作性や使い易さを印象づける点ではソフトやデバイスの成功を最も左右する、唯一無二の存在である。 今さら聞けないUI（ユーザーインターフェース) の基本 最終的なインターフェイスの仕事は “ユーザーゴール + ビジネスゴールの達成”であり、どんなに良いプロダクトを作っても正しい方向にユーザーを導き、ビジネスとし
最良のインターフェイスとはインターフェイスを持たないことだ - Nothing ventured, nothing gained.
Visual Basicの父とも言われるAlan Cooperが立ち上げたCooperに所属するGolden Krishnaが数日前に書いたブログ記事が面白いので、ざっと抄訳してみた。 "The best interface is no interface"と題されたこの記事の中で、彼は「最良のインターフェイスとはインターフェイスを持たないことだ」と主張する。 インターフェイス前提の社会 AppleのLisaは、DOSのようなCUI（キャラクターユーザーインターフェイス）から、GUIの世界にデザインを一変させた。そして、Palm Pilotから現在に至る情報機器はマウスさえ必要なく、タッチで操作できる世界を実現させた。この流れが現在のデザインの問題をすべて解決することになった。 では、良い自動車を作るにはどうするだろう？ そうだ、インターフェイスをそこに載せよう*1。 良い冷蔵庫を作るには
配色の基本。メイン・サブ・アクセントカラーを極める！
前回の[カラーデザインの基本。トーンを理解する！]と[カラーデザインの基本。色の三属性とは？]に引き続き、今回はメインカラー・サブカラー・アクセントカラーの基本ルールについて解説させていただきます。このメイン・サブ・アクセントカラーの基本ルール正しく理解すると、配色を考えるのが簡単になります。 頻繁に配色を悩む方や、デザインの途中で配色を変えてしまう方は、このメインカラー・サブカラー・アクセントカラーのルールを正しく理解できていない可能性があります。なので今回解説するこの記事を読んで、配色についての理解を深めましょう！(偉そうに書いちゃいました。すみません) ちなみに配色という言葉を辞書で引くと、『2つ以上の色を組合わせること。また、組合わせた色合いのこと』と書いてあります。 メイン・サブ・アクセントカラーの役割 まずは、メインカラー・サブカラー・アクセントカラーと呼ばれる、各要素の役割に
「焼肉 三十八」のリニューアルをしました！
2011年11月8日 Webサイト制作, Webデザイン こんにちは、ブログを書きつつちゃんとフリーランスのWebデザイナーとしてお仕事しています、Manaです。先月あたり「焼肉 三十八」様のWebサイトリニューアルのお手伝いをさせて頂いたのでそのレビューなんぞを紹介します。デザインや構成など、サイトリニューアルする上で参考になる部分があれば幸いです。 受注 福岡県でホームページ制作、広告運用等を手がけているCDP様より「焼肉 三十八」様のWebサイトリニューアルの依頼を頂きました。 簡単なリニューアル時のご要望をまとめると下記６点でした。 お知らせ欄は更新可能 WordPressで構築 写真やテキストは流用 携帯版作成（コンテンツは一緒） ブログ・口コミ掲示板は削除 IE6は非対応でOK（ありがとうございます！！！） 制作にかかわるお打ち合わせはCDP社デザイン担当の松野氏とSkypeや
効果的なミニマルデザインと退屈なデザインの境界線
効果的なミニマルデザインと退屈なデザインの境界線ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ミニマルデザインとはそもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいのかわからないデザインになってしまいます。それを避けるため
DESIGNTIDE TOKYO
デザインタイドトーキョーは様々なジャンルから集まった作家たちの真摯なデザイン活動を受けとめる器として、東京という場所だからこそ集うデザインを発表し、トレードするためのエキシビションです。
SEOをマーケティングの一部だと考えるのなんてもうやめたらいいのに：DESIGN IT! w-LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 これはもう前々から思っていることではありますが、もう一度、書いておくことにします。 いまだにWebマーケティングだとかいうと、SEOを思い浮かべる人がいます。 はっきり言います。 そんなのもうやめなさいって。 SEOはWebデザインの一部また、それが何か特別なことだと考えるのも、もうそろそろやめたほうがいいです。 SEOなんて単なるWebデザインの基本にすぎません。 そう。それはデザインであって、Webサイトの設計者が行なうべき仕事です。 まぁ、どんなキーワードが市場で有効かを知りたければ、それは調査担当者にお願いしてもいい。 でも、調査をいくらやったところで、それがサイトに反映されなければ意味はありません。 じゃあ、誰がそれを反映できるかといえば、設計者以外にありません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
