HTMLには画像に「代替テキスト」と呼ばれる値を設定する機能があります。 ユーザーがもし画像を利用できない状況にあるとき、画像の代わりにこの代替テキストが提供されます。 画像のパスが間違っていたり、ページの読み込みが途中で中断されてしまったりしてデータをうまく読み込めない場面はたまにあります。そういったとき、この代替テキストの値が画像の代わりに表示されます。 通信状況が悪いときや、画像が表示されないまま長い間更新されなくなったサイトを閲覧しているときでも、適切な代替テキストが設定されていれば最低限の情報は得られます。 支援技術を利用してサイトを閲覧しているユーザーにもこの代替テキストが提供されます。 支援技術というのは、主に障害者がパソコン利用の際に、操作の補助を行うために併用されるハードウェアとかソフトウェアです。 支援技術のひとつであるスクリーンリーダーを利用すると、画面上の情報をコン

はじめに院内の掲示板や壁には様々な掲示物が貼られているが、作成している部署がそれぞれ異なるため、用紙の向きやフォントなどは統一されていなかった。そこで、雑然としている掲示物をもっと見やすくするために、デザインを統一することにした。 方法掲示物はこれまでWindowsで作成されていたが、きれいな文字の印刷物を作成するにはMac以外に選択肢はなかった。掲示物の基本的なサイズはA4サイズの横向きに統一し、情報量が多いものや目立たせたいものはA3で作成することにした。 掲示物の構成は見出しと本文のみとし、見出しの文章は、誰に向けた掲示物なのかが簡単にわかるようなフレーズにした。なお、A4までの掲示物はすべてKeynoteを使ってデザインし、A3サイズが必要なものだけPagesを使って別途作成した。 見出しは、目立つように角丸長方形を背景にしてヒラギノ角ゴシックW8の白文字で表示させた。本文のフォン

Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni

タイトルと文章の雰囲気が結構違って申し訳ないのですが、お題箱から質問をいただいたので解答しました！内容は主観に偏りますのでご了承ください。 この間のPodcast「Automagic」を聞いてお聞きしたいことがあります。 私は大学の経営学部に通っているWebデザイナー志望です。 マーケティングのどのような考え方を(特に重点的に)習得していく必要がありますか？ マーケティングやデザインで求められることは、どこで何を行うかで大きく変わってきます。 質問ではその辺りは絞られていないので、この記事ではマーケティングの「知る」考え方を広い視野で捉えつつ、下記のようなお話に触れています。 マーケティングとデザインを絡めた視点のお話をしています。 未来のデザイナーさんへ向けて、（恐らく）つまづきやすいところに寄り添いました 原稿・指示をもらったら、そのままのデザインをしてしまう 何から提案したら良いかわ

こんにちは、THE GUILDの @goando です。 私はTHE GUILDの中でもデータを扱う仕事を中心に活動しており、「UXの改善をデータでサポートする」をミッションに取り組んでいます。 ざっくり言うと、THE GUILDのクライアント企業が運営するサービスのログを分析してユーザーの行動傾向からUXの改善点を見つけ出したり、マーケットの市場リサーチを通じてサービスの戦略の策定を支援したり、と言った内容です。 こうした活動を通じて、データ分析の結果をグラフ等のレポートに落とし込むという事を数多く行ってきました。 試行錯誤を繰り返しつつ、データをどのようなデザインで視覚化するとメッセージが伝わりやすいのか、逆にどういう点に気をつけないと誤解を与えやすいのか、といったノウハウを少しずつ蓄積してきました。 データ分析を台無しにするダメグラフかく言う私もかつて、そのグラフから何が言いたいのか

タッチUXを実現する7つのポイント ここまでタッチデバイス全般におけるタッチUIの特徴とその癖について説明してきました。それを踏まえて、実際にHTML5でタッチUXを実現する際に気を付けるべき7つのポイントを述べていきます。 1．ボタンは大きく 指でタッチすることを考慮すると、ボタンは大きくすべきです。小さ過ぎて押しにくいボタンは使いにくいだけでなく、ユーザーをイライラさせUXを大幅に損ねます。また、現在主流の静電容量方式のタッチスクリーンでは、（恐らく）誤動作対策のため、あまり小さいタッチ点は認識しません。 どれくらいのサイズが望ましいのでしょうか。その答えは、AppleとGoogleからそれぞれiOS、Android向けに出しているガイドラインにあります。 iOS human interface Guidelines Android Design どちらも素晴らしいドキュメントで、デザ

いま、自分のポートフォリオを英語/日本語どちらにも対応しようと思っていて、どのように切り替えるべきか、リサーチのためにいろんなサイトを見て回った。その時にこれは良い、これは避けたほうが良さそう、と気付いたことがある。 国旗を使うことによる問題 デザイン上のスペースの節約からか、あるいはグラフィカルに補助したいという理由からか、言語切替のUIで国旗を見かけることがある。 日本にいると「日本=日本語」と、国と言語が対応しているので気付きづらいのだけれど、世界はそういう風には出来ていない。例えば英語を提供する際に、どの国旗が相応しいのか考えてみよう。イギリス？アメリカ？英語を第一言語とする国はいくつもある。 決して国旗は言語を代表するものではないのだ。 また、提供する言語が多くなると、ごちゃごちゃして見づらいという問題も含んでいる。 ただし、言語の切り替えではなく、ECサイトなど提供するコンテン

水上　浩一です。 2017年12月に大阪EC実践会13期が終了しました。 （現在は14期絶賛開催中です） 今回も月商ギネス（最高売上の更新）ラッシュとなりました。 その中には元々大きな売上だったファッションジャンルのショップさんが 11月12月と連続で月商ギネスを更新され昨年対比142％という数字をたたき出すことに成功しました。 本当におめでとうございます！ こちらのネットショップさんに1月下旬、お話を伺う機会があったのですが、 特にスマホページの改修を積極的に行い、コンバージョン率を大幅に向上させたのが成果要因だとおっしゃっていました。 スマホサイトではモノは売れない、とおっしゃる方もいらっしゃいますが、 EC実践会ではこのようにスマホサイトでコンバージョン率を大幅にアップさせて、結果的に売上を上げることに成功している事例が数多くあります。 スマホサイトはうまく改修することで売上を上げる

専門教育やだれかに師事することなく、独学でやってきたなかで参考になった教本、後輩に読んでもらいたい、読んでもらって好評だった本をまとめました。 専門胸臆を受けていない、美大出ではないというのがキャリアのはじめではコンプレックスでもありました（今はほとんどないですが） 独学で進めていくと、どこかでツケを払うときが来ます笑 そんなときにお世話になった本たちです。 ノンデザイナーズ・デザインブック [第4版] 『この本がデザイン学校の4年間の代わりになる、と言うつもりはありません。また、この小さな本を読めば、自動的に優れたデザイナーになれる、と言うつもりもありません。しかし、あなたがページを見る目は確実に変わるでしょう。この本の基本原則に従えば、あなたの作品が、もっとプロらしく、組織化され、一体化され、おもしろくなることを保証します。』(著者「まえがき」より)定番の定番。 ノンデザイナーズとある

下の図を見ると、imageAははっきり表示されていますが、imageBはぼやけています。 高解像度のRetinaディスプレイを搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 高解像度のRetinaディスプレイ※1※1Retinaディスプレイとは、Apple製品に搭載されているディスプレイの呼称のことをさす。を搭載したデバイスが広く普及し、Webデザインの現場では高解像度ディスプレイにも耐えられる画像の作成が必須となっています。 その対応策として、さまざまなスクリーンサイズへの対応に適したSVGが注目されるようになりました。 SVG自体は1998年頃に開発されていましたが、Internet Explorerで標準対応されて

Design is more important than ever, and design systems have become a huge piece of what makes a company or product successful, especially in the hyper-competitive global software market. These companies have historically relied only on user experience as a key differentiator. This demand for better experiences puts immense pressure on designers across the globe. They are compelled to take up more

This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News “Ask Me Anything” interview. Click here to read the transcript. Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forw

Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( Locked padlock icon ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

この記事はUI Design Advent Calendar 2015の19日目の記事となります。 はじめに 「UIは流行りのイケてる感じで」 よく、プログラマ/エンジニアからUIへのオーダーに使われる文句の一つです. プログラマは比較的,ロジカルに物事を考え結論を出すことが要求される職業の一つだと思っていますが, なぜUIに話が及ぶと突然 曖昧で, 感覚的な 結論に考えが至るのでしょうか. システムとインターフェースは切っても切り離せないものです. UIはシステムを扱うのと同じくらい最初から注意して扱われるべきです. 本記事では, プログラマがいかにUIと付き合っていくべきなのだろうか？ということを考えていきたいと思います. あくまでこれから書くことは私が知る情報・経験をまとめたものであって絶対ではないと考えています. 意見・反論がいただければ非常に嬉しいです(きょうちょう.) なお,