よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
人間中心設計(HCD) とは
2015年2月9日、社内HCD勉強会用の資料。スペルミスがあるのを発見したので re-uploadしました。Read less
ディレクターがWeb制作のプロジェクト進行でトラブルを防ぐための5つのコツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、たまです。 LIGにディレクターとして入社して早1年、さまざまな案件に関わらせていただきましたが、困難な事態に直面することも何度かありました。 今あらためて振り返ってみると、そういうトラブルが起きてしまう案件というのは、最初の進め方であったり、決めごとや確認ごとが甘かったりと、共通した原因があるように思えます。 そこで本日は、僕なりに「こうしておくとトラブルを防げる」と思っていることをまとめてみました。 もちろん制作のディレクションは人それぞれだと思いますので、参考までにご覧いただければと思います。 ディレクターがWeb制作でトラブルを防ぐための5つのコツ プロジェクトでトラブルが発生する主な要因としては、以下の3つが考えられます。 制作範囲 スケジュール 金額 もちろんデザインや実装でトラブルになることも多々ありますが、そもそもこの3つがクライアントと認識があっていない場合、
コミュニケーションこそディレクションの要（0ディレ関西レポ）
どもはじめまして。ディレ協関西支部の担当しんがきです。 Webキャンパス「schoo（スクー）」でも登壇した日本ディレクション協会の小嶋 裕亮氏を講師に迎え開催された、開催ゼロディレシリーズの第二段「制作・開発編」のセミナーレポートですね。 今回の資料スライドはこちら まぁこのスライドを見ればほぼ内容は把握できますが、講師の小嶋さんや参加者の皆さんからいただいた反応などをまとめてお届けしてみます。 コンテンツインデックス ディレクションって何やってんの？ 制作・開発フェーズでディレクションのするべきこと ボトルネックは「伝える」部分でおきる ディレクターはつくる人じゃなくてまとめる人 ディレクションって何やってんの？ これにはまぁ諸説あるとは思いますが、どんなディレクターさんでも共通してやってる事ってこんな感じではないでしょうか？ クライアントの要望を聞く 要件を定義する 開発工程を設計し
格好良くても結果が伴わない？デザイン設計に必要な１２の要因|グロースハックジャパン|Growth Hack Japan
はじめに、 アプリケーションやWebサービスを提供する上でデザインは、切っても切り離せない存在です。その為、設計の時点からデザインに関して深く検討を行い、リリース後も微修正を繰り返します。 しかし、時間をかけたにもかかわらず結果的に受け入れられないものを作成してしまう事もままあります。 GrowthHackを利用する事により解決する問題だけでなく、基本的なテクニックなど色々な要因があります。これらを要因をチェックし、自サービスに活用してください。 本記事は ■webmatros ■Startus Interactive ■Six Revisions 上記WEBサイトを翻訳し、GHJにて執筆した記事になります。 ［基本編］ １：シンプルであれ 制限のあるシンプルとする事は、ユーザーに対して頭に入ってくるデザインを提供できると言える。 そして、レスポンスの良い構成になることで、ストレスなく表示
シングルカラムから始める情報設計
横並びは複雑化の第一歩 Webサイトの設計をする際、必ずといっていいほど縦にコンテンツを並べて構成を考えるようにしています。どのような人が、何を求めて Web サイトに訪れているのかというシナリオを基に構成を考えていくわけです。詳細なレイアウトを考えるのではなく、情報の流れが適切であるかどうかを判断するための工程にしています。 パソコン向けの Web サイトデザインの悪い癖のひとつに、「同じくらい重要だったら、横に並べる」というのがあります。広いスペースがあったパソコンが主流の時代ならではのアプローチですが、今は状況が大きく異なります。配信者側にとっての『重要』を出すことは間違っていません。しかし、あれこれ重要だからという理由で隣り合わせにしてしまうと、様々なデメリットが生まれます。 訪問者に迷いが生じる 直接関係のないコンテンツが横に並ぶことで視点の動きが多くなる可能性があります。また、
ペルソナ設計に人間像は重要ではない理由
人間像ではなく動機や文脈を明確に プロジェクトを本格始動する前にペルソナを設定することがあります。様々な背景の方がデザインプロセスに参加すると、何をもって『良い』と判断すれば良いのか分からなくなることがあります。ペルソナは、このプロジェクトにおいて適切な『良い』を判断する際に役立ちます。 ペルソナには「人/登場人物」という意味が含まれていることから、表層的な人間像（性別、年齢、出身地など）を描かなければいけないと考えがちです。しかし、それはペルソナを設定することにおいて、それほど重要ではないと思います。私はペルソナを1枚のシートにまとめることがありますが、見た目やライフスタイルといった属性は、詳細まで掘り下げていません。ほとんどの場合 2 〜 3 つくらいのリストにして省略しています。 代わりに「なぜ、人はプロダクトやサービスと触れ合うのか」という部分を、ペルソナを通して語るように心がけて
"分かったつもり"で設計するな！上流工程のディレクション基礎まとめ（0ディレ関西レポ） | Webディレクターズマニュアル
こんにちは。日本ディレクション協会 関西支部の出原です。 関東では既に何度も開催されている「0からのWebディレクション講座（通称0ディレ）」が、ついに関西でも開催されたので、今回は参加レポートの形を取りながら、そこで得た学びや思ったことなどをまとめてみたいと思います。 まずは資料スライド公開から これを見るだけでもほぼ内容が把握できてしまいますが、せっかくなので以下に要点と個人的な留意点をまとめておきました。 ぜひぜひお役立てください。 コンテンツインデックス 前提となる背景、目的、課題を明確に言語化 ポジションの把握とコンテンツ設計 より具体的なユーザー定義 全ての根拠となるゴールをハッキリ設定する 1.前提となる背景、目的、課題を明確に言語化 今回喋っていただいたのは、東京講演でも人気講師としておなじみの高瀬さん。 プロジェクトの裏側にどんな背景があって、どんな課題があって、それをど
Kajiken.me - UXデザインに不可欠な「アジャイル・ユーザビリティ」のまとめ
VASILYのグロースハッカー見習い。 グロースハックと検索すると一番上に出てくるブログやってます。 ここでは、グロースハックとか本とか気軽に書いてきます。 Twitter : kajiken0630 Home Twitter Facebook Growth Hack Blog 会社の人に貸してもらった「アジャイル・ユーザビリティ」という本が超面白かったので、メモ的に印象に残った点をまとめてみました！ ユーザーエクスペリエンスの要素 目に見える表層の下に、骨格、構造、要件、戦略の順に階層がある。 UXの課題を考える際には、表層ではなく、骨格、構造を見直す必要があり、そのためには要件、戦略に立ち戻る必要がある。 ユーザー中心デザインのプロセス UXを設計する上で、ユーザー中心デザイン(UCD)はマスト。 UCDの手順としては、以下の６つをサイクルとして回していく。 ①調査 ②分析 ③設
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版
はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。 さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。 今回は日本ディレクション協会の人気講座「0からのWebディレクション講座：設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。 以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。 感動設計テンプレート＆講演資料 ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？ 高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべ
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
職業プログラマーなら必ず読むべき「Code Complete」 - $shibayu36->blog;
Code Completeの上下巻を読んだ。 CODE COMPLETE 第2版 上 完全なプログラミングを目指して 作者:スティーブ マコネル日経BPAmazonCODE COMPLETE 第2版 下 完全なプログラミングを目指して 作者:スティーブ マコネル日経BPAmazon 読んだ感想としては、職業プログラマーなら必ず読むべき本だなと感じた。 この本ではソフトウェアコンストラクションに関する話題を扱っている。この本の中でソフトウェアコンストラクションとは、詳細設計、コーディングやデバッグ、単体テストなどなど、要求定義が終わった後、ソフトウェア製作に必要なプロセス全般のことを指している。 主なテーマとして、どうやってソフトウェアにおける複雑さを減らすことが出来るのか、について書かれている。そのテーマをいろいろな観点から説明されている。例えば以下の様な観点がある。 上流工程の欠陥による
「デザイン思考で解決する、サービス設計７つの課題」- インキュベイトファンド主催「起業家とデザイナーの理想の関係」まとめ-ノート｜U-NOTE【ユーノート】-イベントまとめプラットフ��
3 日前 ... ITスキルアップのための情報を発信するブログ「TechAcademyマガジン」です。 プログラミングやWebデザイン ... そこで今回はこのプログラムのDesign Fellowに就任 した藤原由翼氏にお話を伺いました。 今スタートアップ企業・事業開発に求め ... ■「デザイナー」とは「サービスの目的達成のために設 計する仕事」 webデザイナーとは「サイトの目的を実現するために設計・実行する人」。 良く「良いデザイナーを紹介して欲しい」と言われるが、目的によって必要なスキルは変わる。「どの段階の、なんのデザインをして欲しい」のかを明確に。 プロジェクトが進み、メンバーが増えたりすると当初のビジョンと、現在の施策がずれてくる。なので、そのずれや方向性を視覚化して、悩みを解消してもらう。また、どのUI・機能を選ぶか決める、意思決定の基準をもつ手伝いをする。 webだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
in the looop | Looops communications