タグ

*デザインに関するkatz1955のブックマーク (260)

  • ユーザーテスト(行動観察)を活用した潜在的課題の発見事例|東京インターナショナルスクール アフタースクール | ナイルのマーケティング相談室

    記事ではユーザーテストの事例として、住友商事様の「東京インターナショナルスクール アフタースクール」でのユーザー心理を基にした課題発見事例を紹介させていただきます。英語教育の意識の高い方がユーザーとなる、スクールサイトでの調査結果です。 \ナイルのサイト改善提案の紹介はこちらから!/ ユーザーテストの目的 ア フタースクール(※1)の利用検討を目的にWebサイトに訪れたユーザーが、検討に必要な情報を自力で収集できるかどうか調査。また、同校が提供する「英 語で学ぶLTEコース(Learning Through Englishコース)」(※2)がどのように、ユーザーに発見されているかも調査しました。 ユーザー心理を把握し、今後のWebサイト運営やリニューアルに活用できる情報を得ることを目的に実施しました。LTEコースについては、まだ認知が低いコースなので、事前に知らない情報に初めて触れた時に

    ユーザーテスト(行動観察)を活用した潜在的課題の発見事例|東京インターナショナルスクール アフタースクール | ナイルのマーケティング相談室
  • デザインは基本が大切!ひとつ一つをしっかり見直しておきたい20のデザインテクニック

    文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ

    デザインは基本が大切!ひとつ一つをしっかり見直しておきたい20のデザインテクニック
  • UXを定量的に評価する7つの基準で客観的にサイトを改善していこう | 【レポート】Web担当者Forumミーティング 2015 Spring

    オンラインビジネスの成功のためには、ユーザーの意見を客観的に多数取得し、その数値分析から具体的対策を練ることが重要だ。当たり前のことだが、これができているサイトは少ない。 UXはたびたび、Webサイトやサービスの「使い勝手」を指す「ユーザービリティ」と混同されがちだが、UXとは単なる使い勝手ではなく、商品・サービスを含めた体験そのものを表す。 UXの概念を示すものとしては、ピーター・モービル氏が提唱した「UXハニカム構造」が有名だ。しかし、キーワードは英語で言葉の意味がわかりづらく、内容を理解するのは少々難解である。 これを専門家以外にもわかりやすく、ゴメス・コンサルティングで編集したのが「サイト全体構造とUX7つの要素」だ。Webサイトの構造例と、それぞれに対応する7つのUX基準を記している。 1. アクセスのしやすさ「アクセスのしやすさ」とは、Webアクセシビリティやマルチデバイス対応

    UXを定量的に評価する7つの基準で客観的にサイトを改善していこう | 【レポート】Web担当者Forumミーティング 2015 Spring
  • ABテストを検定する

    検定とは 利用者にとっての意味だけを割り切って考えるなら、検定とは、「得られた結果が偶然なのか、そうじゃないのか」を判断するためのツールです。 ただ、何でもかんでも検定する必要はなくて、得られた結果に有意差があるかどうか知るだけなら、検定が必要な場合と検定しなくてもなんとかなる場合があります。 この記事では、ABテストを検定する方法と、どうすれば検定が必要かどうかぱっと見で分かるようになるのか、を書いていきます。 標数が少ないABテストは検定で有意差を判断する 標数が少ない時は、有意差があるのかを知るために検定が必要です。下記の具体例で計算方法を示します。 WebのABテストを行った結果、Aは15クリック、Bは10クリックだった。当に差があるのかを検定で確かめたい この結果に有意差があるかを知るには、χ^2検定を使います。χ^2検定は以下の式で簡単に手計算できます。 χ^2 = (

  • エンジニアと仕事するときにデザイナーができること

    エンジニアの視点を学ぶデザイナーとエンジニア仕事の仕方も考え方も異なります。しかし、良い製品をつくるためにはお互いの協力が欠かせません。考え方が違うからといってそのままにしておくと、品質の低下に繋がることがあります。 「デザイナーはユーザー(人)の声や行動に耳を傾けるべき」「彼らのニーズに合わせた提案や設計をすべき」といった論調を見かけることがありますが、これはユーザーだけでなく、一緒に仕事するエンジニアにも適応できます。すぐ側にいるエンジニアを考慮した提案ができないのであれば、ユーザー相手はもっと難しいと思います。 今でも仕事でビジュアルデザインを担当することがありますが、エンジニア仕事をする際に以下の 6 点に気をつけています。 1. どういうタイプのエンジニアか知るすべてのエンジニアがデザインに興味があるとは限りません。中には仕様を指示してもらえればそれで良いといった方もいます。

    エンジニアと仕事するときにデザイナーができること
  • よくわかるマテリアルデザインの設計コンセプト | fladdict

    iPhoneAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた

    よくわかるマテリアルデザインの設計コンセプト | fladdict
  • UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

    世に出ている「デザイン原則」と呼ばれるものたちをまとめてみました。 ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。 出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。 なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。 更新履歴 2018/10/01: 「アクセシビリティの4原則」「Material Designの原則」「Android TV デザイン原則」「インクルーシブデザインの原則」を追加 2016/12/28: 「Microsoft デザイン原則」を「Windows UX デザイン原則」にアップデートApple Watch デザイン原則」を追加 2015/10/

    UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】
  • これはめちゃ便利! FacebookやTwitterなどの最新デザインテンプレートを生成する「Social Kit」

    これはものすごく便利。めっちゃラク。 FacebookやTwitterなど、コロコロと仕様やデザインが変更される各種ソーシャルメディア。 SNS案件を多く抱えるWebデザイナーにとっては地獄のような状態になりかねないわけですが、今回紹介する「Social Kit」というPhotoshopプラグインを入れておけば、そんな状態から確実に解放されますよ! Social Kitとは? 「Social Kit」は無料で配布されているPhotoshopプラグインです。 Facebook、TwitterGoogle+、YouTubeの最新版デザインテンプレートを自動で生成してくれます。 生成されるパーツは全てレイヤーで分かれているので部分的な利用をすることも可能ですし、画面全体を再現してくれるのでプレゼン資料やデザインの提案にも便利に使うことができます。 「Social Kit」をダウンロードしよう

    これはめちゃ便利! FacebookやTwitterなどの最新デザインテンプレートを生成する「Social Kit」
  • なぜ Web Components はウェブ開発に革命を起こすのか

    ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という 言葉を全く聴いたことがない方は少ないのではないでしょか。 すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しか し、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるで しょうか?この記事では、それを試みていきたいと思います。 デジタル部品の流通革命 # ソフトウェア部品の流通に今、大きな変化が起きてきています。 数年前のオープンソース環境を覚えているでしょうか?レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことな るバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送る のも面倒でした。 そんなオープンソースを取り巻く環境が、git や GitH

    なぜ Web Components はウェブ開発に革命を起こすのか
  • 時計から車まで、あらゆるAndroidのUIの基本「マテリアルデザイン」

    Googleは6月25日(現地時間)、Google I/Oで次期Android(コードネーム:L-Release)の開発者プレビューを発表するとともに、Androidの新しい“デザイン言語”、「Material Design」を発表した。 次期Androidから、Material Designに基いてアイコンやボタンのデザイン、タップやスワイプのユーザー体験が大きく変わる。 Googleはモバイル向けAndroidだけでなく、Android Wear、Android TV、Android AutoでMaterial Designを採用しており、アプリ開発者にもこのガイドラインを順守するよう求めている。 Material Designの基方針は、小さな時計の画面からテレビの大画面、自動車のダッシュボードまで、あらゆるフォームファクターで統一感のある使いやすいユーザー体験を提供すること。

    時計から車まで、あらゆるAndroidのUIの基本「マテリアルデザイン」
  • UXの効果が数字でわかる!5つのUX KPI : DeNA Creator(クリエイター) Blog

    プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ

    UXの効果が数字でわかる!5つのUX KPI : DeNA Creator(クリエイター) Blog
  • シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret

    シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは

    シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
  • Designscrazed.org Is For Sale

  • 36 High-Quality Flat Design Resources

    In contrast to skeuomorphic design, flat design focuses on simple shapes, colors and typography to emphasize clarity and usability. It was a term coined by Allan Grinshtein of LayerVault in his post "The Flat Design Era," published last year. The release of iOS 7 proved flat design is no longer a passing fad, but rather a step forward. The flatness of style means simplifying interface elements, re

    36 High-Quality Flat Design Resources
  • Androidアプリ/iPhoneアプリの画面UI設計するのにPencil Projectが便利 : アリクイのアプリ開発

    (2017/10/18追記) PENCIL PROJECT、二年前から新バージョンの開発がスタートしているようです。 こちらに書いてある内容は情報が古いです。公式サイトの発表を信頼してね。 ================================================== 明けましておめでとうございました。 メス豚です。 今年は縦横無尽に育つ1年にしたいと思います。 もちろん物理的な意味で。 今日は Androidアプリ/iPhoneアプリ設計するときに UI考えたり画面設計するための便利ツール(できれば無料の)探してたんだけど PencilProjectにピンときたみたいな話しします。 まんまですね。 スマホアプリの画面UI設計って、たぶんだけど、最適解がそんなに無いんじゃないかなと思ってます。 Excelで頑張るとか、PowerPointで図形ペタペタ貼ってくとか、

    Androidアプリ/iPhoneアプリの画面UI設計するのにPencil Projectが便利 : アリクイのアプリ開発
  • Web Componentsが変えるWeb開発の未来

    Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか

    Web Componentsが変えるWeb開発の未来
  • 英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい! | 初代編集長ブログ―安田英久

    今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス(GDS)」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府(gov.uk)のサイトには、「デザイン原則(Design Principles)」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや

    英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい! | 初代編集長ブログ―安田英久
  • ウェブデザインをはじめるあなたへ - ウェブ雑記

    ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ

    ウェブデザインをはじめるあなたへ - ウェブ雑記
  • デザイン仕様書(ガイド) の書き方(初歩用)

    8.  デザイン完了! デザインガイド作成! 開発完了!事前に打ち合わせ! (設計段階) 開発者と、 A から Z まで事前にとことん話し合うこと 可能な限り、毎回確認(開発社 ( 者 ) ごとに、スタイルは違う!) 全てのデータを表記する考えは、捨てること(互いに疲れるだけ) 何だ、いいヤツ じゃないか デザインガイド ? おすすめのプロセスとは…

    デザイン仕様書(ガイド) の書き方(初歩用)
  • 美しい無料UIエレメント素材35個まとめPhotoshopVIP |

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    美しい無料UIエレメント素材35個まとめPhotoshopVIP |