Webのアクセシビリティを向上させる、始めに取り組んでおきたいガイドラインの10項目のまとめ
Webの創始者であり、W3Cのディレクターを勤めるTim Berners-Lee氏の言葉に、「Webが持つ力とは、その普遍性にあります」というのがあります。Webサイトに誰もがアクセスできるようにするのは、わたし達の責任です。 Webのアクセシビリティは机上では難しいと思われがちですが、実際に取り組んでみるとそんなに難しいものではありません。障害者、スクリーンリーダのユーザー、低速接続のユーザーのアクセシビリティで、比較的簡単に取り組める項目を紹介します。 10 guidelines to improve your web accessibility 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webアクセシビリティとは何ですか？ 01.カラーに依存しない 02.ズームを無効にしない 03.alt属性のあなたが知らないかもし
チームで行うReact Componentの設計 - Qiita
こんにちは。DMM.comでフロントエンド開発を行っている@ma9toです。 DMMでは各プロダクト毎でフロントエンドの技術選定が違いますが、私が担当しているしているプロダクトでは、一部Reactを採用しています。 この記事では、ReactのComponentの設計をチームで行ったときの反省と、次はどのように行うと良さそうか、現時点で思うところをまとめておこうと思います。 Componentとは まず、Componentとはどういうものか振り返っておきたいと思います。 Componentとは、UIを構成する一部分と考えることができます。 ReactはComponentを組み合わせることので、より複雑なUIを構築していくようなComponentベースのViewライブラリです。 Reactを利用することで、Componentのコードのカプセル化を容易にし、独立したComponentの実装を可能
短期間でUI改善の糸口を発見する！ヒューリスティック評価の手法とポイント｜Goodpatch Blog グッドパッチブログ
グッドパッチでは、これまで多くの企業の新規事業立ち上げやWebサービス、アプリのリニューアルを支援してきました。そしてその多くは数ヶ月の期間がかかり、大規模のプロジェクトでは1年を超えることもあります。実際にサービスを運営されている方からは「UI/UXが大事なのは理解しているけど、予算的にフルリニューアルは難しい」「UI/UXといっても何をしていいのかわからない」といった声をよく聞きます。 そのようなニーズにお応えして、グッドパッチでは短期間で実施できる『Quick Design Install Projects』というサービスをご提供しています。今回はその中でも最短で実施可能な「UI/UXフィードバック」でも用いているヒューリスティック評価の手法をご紹介できればと思います。サービスのUI上の課題を短期間で、かつユーザー視点で導き出し、迅速なUI改善を実現しましょう。 ヒューリスティック評
「ユーザーが行動をおこす条件」の話｜深津 貴之 (fladdict)｜note
新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
Webデザインで「やるべきこと」と「やってはいけないこと」
１.どんなデバイスでも同様の体験を提供する サイトの訪問者は、さまざまな種類のデバイスを使ってサイトにアクセスしています。デスクトップかもしれませんし、ラップトップやタブレット、携帯電話、音楽プレイヤー、または腕時計を使っているかもしれません。 UXデザインにおいて重要なのは、訪問者がどのようにサイトを閲覧しても、デバイスの種類に関わらず同様の経験を提供しなければならないことです。 ※編集部より：一部、誤訳がありましたので修正しました（11/10 11:00） ２. 使いやすくわかりやすいナビゲーションをデザインする ナビゲーションはユーザビリティにおける要です。どんなに良いWebサイトを作ったとしても、ユーザーがサイト内で上手く操作できないならば意味がないということを覚えておいてください。そのため、サイトのナビゲーションは以下の項目に従うべきなのです。 シンプル：どんなサイトであっても最
ユーモアとクソアイデアの境目｜Goodpatch Blog グッドパッチブログ
私が愛してやまないモノには、ユーモアが詰まっている気がします。そんなモノ作りができたらと日頃から考えています。今回のブログでは、みなさまから愛されるモノになるために、私がいくつか試したアイデアをご紹介します。その中で、「これはユーモアだった」「これはクソアイデアだった」という境目を見ていきたいと思います。 試したアイデアと結果について たくさん試したアイデアの中から4つに絞りました。試したアイデアについて、それぞれ結果をまとめてみました。「試」と「結」の構成でアイデアをご紹介してまいりたいと思います。 ※試したアイデアの費用対効果などは算出しておりませんのでご了承ください。 その１ 試：料金を、ラーメンに例えたらどうなるか？ 開発中のサービスの料金体系を見てみると、月額1人あたりの料金が約1,000円でした。そこで、1,000円という料金を「よりリアリティある形」で感じてもらえるように、「
Atomic Design の理解 : molecules と organisms をどのように分割するか - 海外のイケてるテックニュースを翻訳するよ
Original: Making sense of atomic design: molecules and organisms by Alla Kholmatova 本記事は、原著者の許諾のもとに翻訳・掲載しています。 frasco.io 👆こちらに移転しました。 我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での最初のパターンライブラリ開発について、そしてなぜ我々が Atomic Design を使うことになったのかについて著しました。 全般的に、Atomic Design は我々のチーム内でうまく機能しています。それはインターフェイスの理解の共有や、さらなるモジュール化への移行、我々のデザイン言語の進化などに貢献しました
決して止まらないカイゼン体制を作りたい | 深津 貴之 (fladdict) | note
中長期のための大きなデザインも大事だけど、そのために日々の改修が犠牲になってはならない（その逆は言語道断）。そんなわけで、しばらくの間は、1〜2日で終わる小さな改修を、コンスタントにnoteチームに提案したいなぁと考えている。 もちろん、「リソースが許せば」だけれども。なぜならpiece of cakeにはまだデザイナーが1人しかいないことだ。そんなわけで、中長期でどういうチームを作るべきかウンウン唸っている。 並行して走るスロットが3-4つ欲しい理想を言えば、デザイン/開発リソースを3つのグループにわけたい。「大局リソース」、「開発リソース」、「カイゼンリソース」の3つだ。これらはそれぞれ独立しているのが望ましい。複数のレイヤーを1人のスタッフが兼任していると、どれかが忙しくなると、他の全てがストップしてしまうからだ。 大局リソース ガイドライン、コンポーネントなど、会社全体にストックさ
Go APIサーバーの設計について、golang.tokyo#9で話しました。 - Gunosy Tech Blog
どうも、Gunosyの新規事業開発室エンジニア、高橋（@__timakin__）です。 先日行われたgolang.tokyo#9にて、GoのAPIサーバーの設計についてトークをする機会を頂いたので、いってきました。 スライドはこちらです。全編英語となっておりますが、ご覧頂けると幸いです。 speakerdeck.com 概要 アジェンダの前の序文にも書いてあるのですが、GoのAPIが大企業で試験的に導入するというフェーズを超え、スタートアップなどでも「Goって最近トレンドだよね」という声が聞こえ、小規模のチームでも積極的に登用されるようになってきたように感じます。 あくまで個人の観測範囲での話なのでバイアスがあるとは思いますが、「試してみた」というトークが界隈でも最近少なくなったように思います。 そんな中、参考例となるGoのAPIのOSSは非常に少ないため、新規に始めるハードルは、学習コス
Reactアハ体験 - Qiita
Reactはちょっとしたコツを掴むと一気に理解が進みます。 Googleのデベロッパーであり数々のReactトレーニングを手がけてきたTyler McGinnis氏によるReact "Aha" Momentsが非常に参考になるため、本人の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://tylermcginnis.com/react-aha-moments/ 私が技術的なコンテンツを教えたり書いたりする時の主な目標の1つは「アハ体験」を最大化することです。アハ体験は物事が突然理解できた瞬間のひらめきです。私たちは皆これを体験してきましたし、私の知る最高の教師たちは聴衆に応じて、それらの瞬間を最大化するための教えを最適化することができます。 ここ数年、私はほぼ全ての一般的なメディアでReactを教えてきました。その間、私はReact習得
Software design and team design
グロースエクスパートナーズ株式会社/Growth xPartners Incorporated.•1.7K views
コンテンツファーストでプロトタイプを構築する
Benは、UXPinのコンテンツデザイナーです。Webデザインとバックエンドの開発の仕事をしています。 ユーザーのためにデザインするには、ユーザーの最終目標とそこに辿り着くまでの行動を知っておかなければなりません。この２つはそれぞれコンテンツとユーザーフローと呼ばれます。これらが一緒になって、素晴らしいWebサイトの核を作るのです。 では、情報の概要をインタラクティブデザインに昇華させるにはどうすればいいのでしょうか？ この記事では、一連のコンテンツを１つのプロトタイプにする手法について、紹介したいと思います。 コンテンツリストをまとめる 私たちは何をデザインしているのでしょうか？ 多くのデザイナーは、まず外枠を作成してから内側へと仕事を進めていきます。ユーザーが多くの時間を費やす情報自体を検証する前に、情報の入れ物や枠組みから制作してしまうのです。 内から外へデザインを進める人は、ユーザ
RDBアンチパターン リファクタリングについて話をしてベストスピーカー賞を取ってきた #builderscon - そーだいなるらくがき帳
Builderscon 2017で登壇してきました。 builderscon.io 登壇資料はこちらです。 今回も僕が超絶リスペクトしてる id:t-wada さんと そこそこリスペクトしてる 空前絶後のォォ！！！！超絶怒涛にリスペクトしている上司の id:onishi さんの名言を引用させてもらいました。これはテストコードやモニタリングで品質が見える化されますが「見える化されるだけでは問題は解決しない」という本質をお伝えしています。我々はエンジニアなので技術で問題を解決していくわけですし、問題を解決するためには手を動かすしかありません。ですのでまさに今の現場を改善していくのはあなた自身です。 あとは今年、話をしてきたデータベースリファクタリングの総集編って感じです。ホントは実例のRDBアンチパターンを元にリファクタリングしていきたかったんだけど60分では短すぎて「続編に期待」みたいなレベ
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
ニューススイート（News Suite） / Stories デザインが生まれるまでのストーリー / Sony Design
「幅広いニュースを楽しむうちに自分のニュース アプリになっていく、という自然の流れをつくる」 — なぜ今ソニーはニュースアプリをつくろうと考えたのでしょうか。 上木：ニュースポータルアプリはグローバルでみると未開拓の市場で、日本ほど浸透していません。一番盛り上がっている日本も、そのユーザー体験の深化は現在進行形で、AIなどこれからの技術進化に照らして、まだまだ完成されたものではないと思っています。 私たちはこれまで、膨大なインターネットのコンテンツを自分に合った形で楽しめるようにするにはどうしたらよいかというテーマに取り組んできました。なかでもニュースは誰もが毎日利用するものです。今回、これを軸にしようと考えました。 赤川：ではどうやってインターネット上で自分の好きな情報を集めるかとなるのですが、実は多くの人にとって最初から興味のある情報だけを探すのは難しいもの。大抵は広くいろいろな情報を
感覚に訴えるビジュアルファシリテーションのすすめ デザイン会社 ビートラックス: ブログ
突然ではあるが、ビジュアルファシリテーションをご存知だろうか？ビジュアルファシリテーション（VF）とは会議やユーザーリサーチなどでの会話を図や絵に表現しながら話をしていく手法で、グラフィックファシリテーション（GF）という呼び方でも知られている。会話を見える化することのメリットとしては、以下の7点が挙げられる。 記憶に残りやすくなるメッセージをより速く伝えられる理解度を高める（抽象的な概念の説明など、見える化する事でイメージしやすくなる）感情に訴える（伝える相手の感情に訴えることによってエンパシー＝共感が生まれる。エンパシーが生まれると他人事が自分事になる）学習者のモチベーションをあげる（教科書も文字だけだとつまらない）アイデアの発想がしやすくなる環境づくりをサポートするグローバルなチーム内においては言語の壁をサポートするのにも役立つアイディエーションとは？効率的に行うための5つのポイント
【完全保存版】シートで簡単チェック！デザイナーが見落としがちなUIデザイン12の想定漏れ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能
レスポンシブWebデザインのための２つのCSSテンプレート
最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。 スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。 もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。 とにかく耳にする機会は多いし、できたほうがいいという気はするんだけど、なかなか手をつけられない。 難しそうというイメージがかなりあるんですね。 ただ、実はレスポンシブ対応とはいってもCSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。 つまり、CSSが普通に書けるようになってしまえばレスポンシブだろうとあまり関係ないわけです。 簡単にメディアク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアのためのデザイン思考入門が発売されました！ - mo-fu note
複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
