なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
サービスに求められるものを、6段階に分類する｜深津 貴之 (fladdict)
「サービスの体験をよくする」というのが、漠然としてどうすればいいかわからないとき、まずユーザー体験を6段階に分類するのをオススメします。 この図をベースに、 ・あなたのプロダクトの現状 ・やろうとする施策やアップデートが、それぞれどのレイヤーに属するかを見て、基本は低レイヤー（機能より）のものから、充足させてゆきます。 下記は、家を例にしたのユーザー体験です。 Lv 0. 存在しない家がない。寒い。そして何も解決してない。 Lv 1. 機能がある屋根と壁と床がある。とりあえず雨風がしのげる。色々と我慢すれば、まぁ生きていける。 Lv 2. 安全と安心地震で壊れない。水漏れしない、火災報知器がついた、ドアに鍵がかかるようになった。最低限の信頼性が担保できる状態です。 Lv 3. 使いやすい、わかりやすいまっとうに使えるか。家のなかで迷わない。生活導線が機能するか。キッチンや冷暖房などがスムー
Design disrupts design - there's never been a better time for designers
In the past, big companies ate small companies. Today, fast companies eat slow companies. The impending possibility of disruption puts tremendous pressure on large organizations to innovate – IT organizations especially. To stay competitive, organizations must not only be creative, they must also be able to execute and get solutions into the hands of users.
[ 技術講座 ] Domain-Driven Designのエッセンス 第1回｜オブジェクトの広場
DDD難民に捧げる Domain-Driven Designのエッセンス 第1回 ドメイン駆動設計とは 株式会社オージス総研 アドバンストモデリングソリューション部 佐藤 匡剛 Domain-Driven Design Tackling Complexity in the Heart of Software Eric Evans 著 Addison-Wesley, 59.99ドル 560ページ ISBN: 0-321-12521-5 「ドメインモデリング」は、アプリケーション開発において最も重要な部分だとされています。しかしその割には、フレームワークの使い方やアーキテクチャの設計方法など技術に関する解説書はたくさんあるものの、ドメインモデリングそのものを扱った書籍はほとんど無かったと言ってもいいでしょう。Eric Evansの『Domain-Driven Design』（以降DDD）は、「
Data Models
Data Models: A Comprehensive Guide to Structuring Information for Optimal Insights and Decision-Making In the realm of data management, the use of effective data models plays a pivotal role in organizing and representing information in a structured and meaningful way. Data models serve as the blueprint for databases, facilitating efficient data storage, retrieval, and analysis. This article delves
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
コンウェイの法則（Conway's Law） - Plan9日記
libtaskが提供するコルーチン。その歴史は古く、マルチプロセス／スレッドが登場する以前の並行システムの実装によく用いられていた。例えば、Simulaとかが有名だが、スラッシュドットに次のような書き込みを見つけた。 Simula開発者Kristen Nygaard氏死去 Anonymous Coward : 2002年08月14日 12時35分 (#145858) 手元の教科書によると，当初はクラスがデータ抽象化にたいへん有効だ，ということは Nygaard と Dahl も気づいてなくて，1972年になってから Hoare が初めて指摘した (Acta informatica, 1(4), 1972)，とあります．SIMULA67 にクラスを導入した理由は，むしろコルーチンをサポートするためだったそうで． へぇ、これは知らなかった。 このコルーチンの生みの親はMelvin Conway
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
「洗濯絵表示」全41種類の意味を解説！覚えておきたい正しい洗い方
洗濯表示をチェックすべき理由 洋服のお手入れは、素材に合った適切な方法で行うことが肝心ですが、そのためには洗濯表示を理解する必要があります。何も知らずに乾燥機に入れてしまったり、アイロンをかけてしまうと、型崩れや縮みの原因になることも。お気に入りの洋服を長持ちさせるためにも、洗濯表示の意味は必ずチェックするようにしましょう。 覚えるべき5つのマーク 洗濯表示は、洗濯、アイロン、漂白、タンブル乾燥、自然乾燥、クリーニングの6つのマークに分けられます。それぞれの記号が何を指しているのかを覚えてしまえば、失敗することなくお手入れすることができますよね。ここからは、6種類のマークを細かい意味と合わせて解説していきます。 洗濯 洗濯の仕方は、洗濯桶のイラストで表示されています。桶の中の数字は上限の水温を示していて、30度・40度・50度・60度・70度・95度と細かく分類。桶の下の横線は衣料品に与
4ステップで作成する、DB論理設計の手順とチェックポイントまとめ - Qiita
はじめに 「達人に学ぶDB設計」、「SQLアンチパターン」を読んだのでDB設計をする流れとその過程でのチェックポイントをまとめてみました。 今回は本に載っているものの中でも特に重要そうな部分に絞ってみました。 さらに詳しいことを知りたい方は本を購入してみてください。個人的には達人に学ぶDB設計徹底指南書のほうがおすすめです。こちらだけあれば十分だと思います。 DB設計には大きく分けて論理設計と物理設計の二つがありますが、今回はアプリケーション開発でメインとなる論理設計の部分に焦点をあてて説明をします。 一番最後にチェックポイントだけをまとめた章を用意したので、チェックポイントだけ知りたい方は最後だけ見ていただければと思います。 DB論理設計の流れ DB論理設計は以下のようなステップで進めていきます。 エンティティの抽出 エンティティの定義 正規化 ER図の作成 以下では各ステップごとに章を
【日本語フリーフォント】本当は教えたくない！デザイナーが仕事で使ってる12選【商用可】 | ベーコンさんの世界ブログ
１．うずらフォント（手書きフォント系） ▼ぜんぶうずらフォントです。 手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。 ゆるい感じが可愛らしい。 ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！ このフォントの使いみち ダウンロードはこちらから ２．Noto Sans Japanese /a 源ノ角ゴシック（ゴシック太さ多数） GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。 しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ ぼくも、そう思います！ あーでも、しかし１つだけこのフォントが便利な点があるんです。 それは 文字の太さの種類がある これが大事なんです。デザインを作る時に便利！ OSに最初に入ってるフォントは、太さの種類が２、３種類だと思います。 ボールドボタンで太く
インフラを意識してコードを書くということ - Hatena Developer Blog
チーフエンジニアの id:Songmu です。 4月に 新人エンジニア研修を行なった のですが、その際に、「インフラを意識したアプリケーションの書き方」という講義を担当しました。そこでおこなった講義の内容について整理しながら書き起こしていきたいと思います。 インフラを意識すると何が良いか 業務でWebアプリケーションを扱うと、個人ではなかなか扱えないトラフィックであったりデータ量を扱うことになります。小規模サービスでは考えなくてよかった多くのことを考慮する必要がでてきます。なかなか体験できないことでもあるので、楽しく、やりがいもあります。 また、そういった経験を通して、インフラを意識しコードをかけるスキルを身につけることは、Webエンジニアとしては大きな強みとなります。ISUCONで優勝できるかもしれません*1。 インフラを意識すると何が良いか 〜 中規模ベンチャーの場合 そもそも、はてな
五輪エンブレムの“ここ”がすごい 幾何学的に分析、ネットで称賛の声
東京五輪・パラリンピックの公式エンブレムに決まった「組市松紋」のデザインを分析したツイートが話題を集めている。 ibukiさん（@ibuki7）のツイートによると、エンブレムは、大きな24角形と小さな12角形の枠組みに分割できるという。12角形の頂点を結んで小さな長方形を作り、頂点同士で組み合わせている。ibukiさんの出身大学の教授が「見つけ出すのに3時間かかった」ほど、精巧にデザインしているようだ。
『さよなら、インターフェース』を読んで、スクリーンの無い未来について妄想した - マルシテイア
僕がWeb業界に飛び込んでから一年が経つ。 フロントエンドの端くれとして、今年はデザインについても勉強したい。 あいにく僕は美的センスが完全に破綻している。 せめてUXに関する力を付けるべく、最近それらしい本を読み漁ってる。 そのうち一冊が「さよなら、インターフェース」だった。 さよなら、インタフェース -脱「画面」の思考法 作者: ゴールデン・クリシュナ,武舎るみ,武舎広幸出版社/メーカー: ビー・エヌ・エヌ新社発売日: 2015/09/17メディア: 単行本（ソフトカバー）この商品を含むブログ (5件) を見る 概要 The best interface is no interface | Cooper Journal 去年9月発売の本書は、↑のブログ記事に加筆修正を加えたものだ。 元のタイトルは "The best interface is no interface" 。 タイトルの
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
User Inyerface - A worst-practice UI experiment
Mosaic – Creative Spaces Toolkit by SAP Design on Vimeo
Storyboarding in UX Design
設計の「なぜ」を考える | タイム・コンサルタントの日誌から
