1 - 40 件 / 791件
1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。 本記事では、 SEのAさん デザイナーのBさん の二人が画面デザインをする過程を比べながら、その思考の違いを整理してみます。 3.SEのAさんの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか?今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ?最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ!」官公庁のサイトですよ?官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース(住所フォーム)は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能(郵便番号による住所補完)は、住所フォームの改善方法として最も効
はじめにはてな匿名ダイアリーに投稿された記事「お前ら失明したらどうする?」への回答です。悩みましたが、中途で視覚障害者になった一人として答える義務がありそうなので投稿します。 https://anond.hatelabo.jp/20241004112542 ろくでもない記事や反応コメントを読むのは嫌いじゃないので定期的に巡回していたところ、今回の記事を発見した次第です。読み専で書き込みの勝手がわからずnoteに投稿することにしました。 スクリーンリーダー(画面読み上げ機能)の使い方を覚えろ上から目線ですみません。緊急度が高そうなので先にスクリーンリーダー(画面読み上げ機能)についての話から。 元記事によると失明の可能性が高いとのことですので、まずは画面を水にスマホを操作する方法を覚えてください。スマホは必需品ですので、今後の生活を左右します。 iPhoneの場合、設定→アクセシビリティ→V
"シリコンバレーを作った人物の1人"と称され、故スティーブ・ジョブズ氏が頼りにした人物がいる。 レジス・マッケンナ氏。 半導体関連の企業で働いたあと、70年代にみずからのマーケティング会社を設立した、マーケティングのプロだ。 あるときマッケンナ氏は、うわさを聞きつけたジョブズ氏から電話でコンタクトを受け、ジョブズ氏、そしてエンジニアのスティーブ・ウォズニアック氏との打ち合わせにのぞんだ。 相談は「アップルII」(1977年発売)というコンピューターのマーケティングについて。 ジョブズ氏らは、製品についての記事を雑誌に載せる方針を明かした。 マッケンナ氏は、その内容があまりに専門的で、一般の消費者には受け入れられないと感じ、「市場を広げたいなら、自分と同じようなタイプの人たちに発信するのではだめだ。記事は書き直すべきだ」と助言した。 ところが2人はその意見を気に入らず、部屋を出ていってしまっ
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ(要キーワード) 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
多摩ニュータウンができて50年以上。総面積約3000ha、計画人口34万人という日本最大のニュータウン計画だったがゆえに、「第四の山の手」から「陸の孤島」「オールドタウン」まで、よくも悪くも世間の注目を浴び続けてきた街だ。 現代の東京に住んでいると当たり前の存在になっているが、「巨大な実験都市」とも言われるように、実は日本史上でも二度とあらわれない、貴重な場所なのかもしれない。 建造物は50年たつと文化財の仲間入りできるというけれど、一方で多摩ニュータウンは生きた街である。東京都は2040年代を見据えた都市計画を立てているらしい。 多摩ニュータウンの過去から未来へ。 これを機に、ニュータウン以前の多摩丘陵の面影、多摩ニュータウン黎明期、バブル〜平成の多摩ニュータウン、そして未来の多摩ニュータウンについて...四世代にわけて、実際に歩いてみたい。 多摩ニュータウンのなにがすごいのか 1971年、
結論から書くと、ちょっと思い当たらない。というおはなし。 そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。 切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり興味がないから、そこについては書きません。 じゃあ、ここで何を書くかというと、UIの話をします。鉄道に限らず、いろいろなシステムにも言える話かな、と思ったので。 きっぷを買うまでの道のりが大変先述のプレスリリースには色々と変更点が書かれているんですが、1番目に書かれているのが「列車のお申し込みの操作方法が変わります」という点。 「えきねっと」トップページからダイレクトに、「乗車駅」「降車駅」や「日時」
朝起きたら、突然片方の耳が聞こえなくなった。 突発性難聴だ。 昔に急性感音性難聴になったことがあり、その瞬間に悟った。 これは2週間以内に治療しないと治らないヤバい病気だ。1か月たつと完全に手遅れだ。 すべての予定をキャンセルして、かかりつけの大学病院に行った。 聴力検査の結果、片耳は完全に失聴していた。 どんな音も完全に聞こえていない。 聴力検査のスピーカーがでかい音で振動しているのはわかるんだけど、音として全く聞こえないのだ。(100dbでも聞こえない。通常は10-30dbぐらいで聞こえるはず) 医者から、大量にステロイドを入れる全身ステロイド療法を提案され、受け入れる。 ステロイド剤のプレドニゾロン5mgを 朝30mg(6錠) 昼30mgで合計60mgを3日飲むことになった。 その後、量を減らしていくというのを合計1週間やることになった。 //全身ステロイドはステロイドパルスとは厳密
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています: 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
こんにちは。カンムで業務部長してます平湯(ひらゆ)です。 カンムは現在、Visaプリペイドカードの「バンドルカード」と手元の資産形成に活用できるクレカの「Pool」の2つの事業をやっています。今回はバンドルカードのお話です。 2022年末に過去の問い合わせ率を集計したところ、一番多かった時期と比べると問い合わせ率が半分になってました。(問い合わせ率 = 問い合わせ数 / 稼働会員数) 良きタイミングなので頑張ってきたことを振り返ってみます。 どんなことをやったか一次情報から課題特定 →問題提起 →オペ整備 →リリースのサイクルを回した結果です。何よりも一次情報の取得が大事です。時間がかかるし、単純作業なので苦しいんですが、生の声を読むことで感情や背景が頭に染み込みます。問題により深く入り込めているという感じでしょうか。 この課題の解決策をエンジニア・デザイナー陣と考えていきます。カンムはエ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは4Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは!LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 デジタル庁のミッションである「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
皆さん、フォーム作ってますか? Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
先日、任天堂の株主総会が行われた。例によって詳細をまとめているので前回の記事をご覧いただきたい。 任天堂株主総会レポート2024 | N-Styles 株主総会レポートでも記載したが、質疑応答で最初に指名された質問者が「任天堂は視覚障害者対応が遅れているのではないか」と指摘し、私はこの質問に非常に驚いた。 なぜなら、私自身が株主総会参加の半年以上前から用意していた質問とほぼ同じだったからだ。 この質問内容を7月1日に任天堂が掲載した議事録から引用する。 Q1 ゲームを遊びたいと思っている視覚障がいを持つ人も、世の中にはいると思う。任天堂がこうした方に向けて取り組んでいることがあれば説明してほしい。 A1 代表取締役社長 古川俊太郎: 当社では、世界中の多くの方々に当社のゲームを遊んでいただきたいと考えています。この場で具体的な取り組みを申し上げることは控えさせていただきますが、視覚障がいの
enden @enden_nix 松屋の券売機のUIはこれまでも着々と悪化を進めてきたがここに来て「「極み」」に到達した感ある デザイナーいないんですか? pic.twitter.com/O4Ivhfvbhs 2023年04月25日 17:56:26 enden @enden_nix これまでも牛丼1杯と半熟玉子頼むだけで16回のボタン操作が必要だったりして異常だったけど流石にこれは無いと思う、個人経営のラーメン屋さんがなんとか導入したとかならまだしも大手全国チェーンの最新型機ですよ???? 2023年04月25日 18:04:36
AI企業のAnthropicは10月23日、大規模言語モデル「Claude 3.5 Sonnet」の刷新と、新モデル「Claude 3.5 Haiku」の導入を発表した。Claude 3.5 Sonnetには、AIモデルが人間のようにコンピューターを操作できるようになる新機能「コンピューター使用」が追加された。 アップデート版のClaude 3.5 Sonnetは、特にコーディング分野で大きく性能を伸ばし、業界ベンチマークで広範囲にわたる改善を示した。SWE-benchの検証済みタスクでは、前バージョンの33.4%から49.0%へと性能が向上し、他のすべての公開モデルを上回る結果となった。 新たに導入されるClaude 3.5 Haikuは、前世代の最大モデルであるClaude 3 Opusと同等の性能を持ちながら、コストと速度は前世代のHaikuと同等を維持している。特にコーディングタス
村井理子 @Riko_Murai 義母も義父も、コンビニには行けなくなってしまった。カードやポイント、画面操作が必要だから、怖くて行けないらしい。銀行もハードル高いらしく、毎度、予約して(!!)、行員さんに全部やってもらっているらしい。なんかもう、どうしたらいいのだろうな 2023年04月26日 16:52:06 村井理子 @Riko_Murai 翻訳家・エッセイスト。愛犬は長い棒を回収する琵琶湖の至宝。『射精責任』(太田出版)『ラストコールの殺人鬼』(亜紀書房)、『未解決殺人クラブ 市民探偵たちの執念と正義の実録集』(大和書房)、【最新刊】『ある翻訳家の取り憑かれた日常』(大和書房)映画『兄を持ち運べるサイズに』原作『兄の終い』もよろしくお願いします。観てね! rikomurai.com/%e7%a7%81%e3%8...
JINSから「メガネにつけるマウス」。これ、かなり革命的かも2025年02月26日 21:4942,786 はらいさん これまでも数々のユニークな製品を生み出してきたアイウェアブランド「JINS(ジンズ)」が、新たにデジタルデバイスを操るメガネ「JINS ASSIST(ジンズ アシスト)」を発表しました。 メガネでマウスを操作。"デジタルデバイドの解消"を狙うJINS ASSIST本体。指でつまめるサイズPhoto: はらいさんJINS ASSISTは、手や腕などに障害のある方でもわずかな頭の動きだけでデジタルデバイス上でマウス操作が可能になるというガジェット。 JINSが過去に手がけたココロとカラダのセルフケアメガネ「JINS MEME」に搭載された独自のセンサー技術が応用され、障害があってマウスを使うのが難しい方や、そのご家族からの要望を受けて誕生したのがJINS ASSISTです。 メ
この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作ることは訪れてくださるユーザーの方々だけでなく、クライアントにとってもユーザーの機会損失を防ぐことができるので多大なるメリットがあります。(よくコードが適当でもデザインが見えていれば良いって意見を聞くけれどそんなことはない) ただ、アクセシビリティを意識したHTML/CSSコーディングについてのまとめだと内容量が非常に多くなりZennなら記事より本で出したほうがベターになってしまうので、今回は数あるアクセシビリティの視点から「キーボード操作で
でゅら @rahandu アプリケーション全般でそうなんだけど、モニターの解像度がでかくなるにつれて、デザインは余白を作りたがるのなんなんだろう 広くなった意味がないし古いデバイスで作業しづらいし良いことないと思う twitter.com/ichirowo/statu... 2021年10月05日 18:00:54 Lacnor @Lacnor_JP ボタンを、形はそのままで、グラデーションと枠を無くして、コントラスト強めな単色で構成してくれれば、使い勝手そのままでナウくなると思いましたまる twitter.com/ichirowo/statu... 2021年10月05日 15:57:32
ひろじ @kondohi 先に結論から言っちゃえば「客がスマホからメニューを操作するのを前提のシステム」は全部ダメなのでコンサルに騙されて導入を考えている店は全部コンサルごとクビにしていいと思うよ。 2025年01月14日 08:53:29 ひろじ @kondohi 「アプリを入れて貰えるとお得なクーポンが貰えるし注文も使うと便利です」というのはOKなんですよ。それは囲い込みをしたい店と客の双方にメリットのある話なんです。 でも「スマホからじゃないと注文できない」のはぜんぶダメ。即刻席を立つべきレベル。 2025年01月14日 08:55:27
かべ @kataru_kabe 友達が「子育て中のママはみんな履いて欲しい」と力説していたNIKEのゴーフライイーズ、私も履かせてもらったらマジで"そう"だった...子や荷物で両手が塞がっていても脱ぎ履きできるし、屈まなくて済むから妊婦さんにも良いと思う。妊娠中に知ってたら間違いなく買ってた。 nike.com/jp/flyease pic.twitter.com/bNfuX9540h 2022年12月11日 10:43:35 かべ @kataru_kabe この靴はTwitterで話題になったので存在自体は知りつつもそこまで関心がなかったんですが、自分の立場が変わったことによって「これめちゃくちゃ便利やん」となった。元々は障害を持つ人の声をベースに開発したとのことで、ユニバーサルデザインってこういうことだよなーとしみじみ実感している。 2022年12月11日 10:43:36
日本―ドイツ戦では、ABEMA1日の視聴者数が1000万を超えた。今回のW杯が、配信と放送の考え方や楽しみを変えるきっかけになるだろう(写真/アフロ)この記事の写真をすべて見る 連日連夜、日本中を"楽しい寝不足"にさせているサッカーのワールドカップ(W杯)カタール大会。その中継で名を上げたのが、無料で楽しめるインターネットテレビ局「ABEMA」だ。「移動中もスマホで楽しめる」「試合後も見られる」「全64試合視聴できるアプリがわかりやすい」と、人気が急上昇。日本代表が1次リーグの初戦で強豪のドイツに逆転勝利した日の1日の視聴者数が「1000万を超えた」とABEMAは高らかにアナウンスした。これまでW杯のような国際大会の中継は、テレビの独壇場だった。今回ABEMAがFIFAに支払った放映権料は200億円ともいわれる。"新しい未来のテレビ"を掲げるABEMAが設立した当初から藤田晋社長に取材して
少数色覚者にとって黄緑とオレンジは見分けづらい組み合わせの一つです。この記事のタイトル画像とかなかなか最悪です。 WEB、アプリや印刷物などのメディアではだいぶカラーユニバーサルデザインの考え方が浸透してきており、デザイナーも多様な色覚でも読み違えないように配慮してデザインすることが当たり前になってきていると思います。 Photoshopなどのグラフィックツールには簡単に少数色覚の見え方を確認できるプレビューモードがありますし、AdobeColorを使えば無料で少数色覚の人が混同しやすい色かどうかをすぐに確かめられます。https://color.adobe.com/ja/create/color-accessibility 少数色覚が見分けづらい色の組み合わせだと「-」が表示されるしかし、工業製品の世界では少数色覚にとって見分けづらい緑とオレンジの組み合わせのLEDインジケータ(表示)を
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
誰もが気軽に電子機器を持つようになった今、私たちの生活はデジタルの恩恵で確実に便利になっています。しかし、UIは"よりよさ"を求めた結果、期待した評価とは正反対の声が集まること少なくありません。 そこで今回は、慶應義塾大学環境情報学部の教授で、予測型テキスト入力システム「POBox」やiPhoneのフリック日本語入力システムの開発者であるUI研究者の増井俊之氏に、UIの本質についてお話をうかがいました。まずは増井氏がUIに関わることになったきっかけと、使いやすさの本質について。 UI研究に関わるようになった流れーー学生時代には電子工作やソフトウェアに興味をお持ちで、現在のUIにつながる研究は社会人になってから取り組まれるようになったとのことですが、もともとUIやデザインにご興味があったのでしょうか? 増井俊之氏(以下、増井):小学生のころからずっと電子工作が趣味で、デジタルおもちゃやアナロ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く