デザインシステム｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化を。」の実現を目指し、ウェブサービス・ウェブアプリケーションの使い勝手や情報の探しやすさ、アクセシビリティ等の向上に取り組んでいます。 その一環として、「デザインシステム」の構築を推進し、官民問わずすべての方が参照できる形で公開しています。よりよいデザインの普及・啓発に向けて拡充と更新を継続的に行い、あらゆる人がデジタル化の恩恵を享受できる社会に貢献します。 2024年5月30日 デザインシステムのコンテンツは専用サイト「デジタル庁デザインシステムβ版」へ移行しました 専用サイトで、ガイドラインやデザインデータ等の各アセットを案内しています。 イラストレーション・アイコン素材 行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。 最近の取組2024年5月 専用サイト「デジタル庁デザインシステムβ
WordPressのテーマを作る羽目になったWebエンジニアへ
はじめに Webエンジニアの皆さん、日々の業務お疲れ様です。皆さんは、さぞや楽しいエンジニアライフを送っていることでしょう。最近は技術の進歩も落ち着いてきましたので、Rustなんかに手を出して、先行者利益を目論んだりしているのではないでしょうか。 さて、そんな楽しい中、たまにやってくる何とも言い難い案件というのが「WordPressのテーマ作成」です。普段、大規模開発や自社サービスに携わっている方は、WordPressに関わることはないかもしれませんが、請負業務やフリーランスの方には、ふと湧いてくる案件でもあります。そして、何かと言い訳を付け、できる限りWordPress関連の案件は避けているのではないでしょうか。 なぜ、エンジニアはWordPressを嫌うのか エンジニアというのはWordPressを嫌う傾向にありますが、それは何故でしょうか。 プライドがゆるさない WordPress界
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
ユーザーにない知識を補わないと、UXを損なう
調査型のタスクに適した情報の提供ができていないWebサイトは多い。そうしたサイトでは、ユーザーはさまざまな情報ソースを手作業でつなぎ合わせるという不必要な手間をかけなくてはならないのだ。 Unbridged Knowledge Gaps Hurt UX by Kim Flaherty and Kate Moran on March 3, 2019 日本語版2019年10月17日公開 デジタル製品のデザインチームは、ユーザーの技術レベルや情報探索スキルを過大評価していることが多い。2016年にOECDは、中程度の複雑度のタスクを正常に完了できる成人は全体の3分の1しかいないことを明らかにした。このレベルのタスクを完了するには、ユーザーはページやアプリケーション間の移動をする必要がある。また、ステップを複数こなさなければならない上に、ツールやソフトウェアの機能（たとえば、ソート機能など）も利用
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ | 東京フリーランス
制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！2019.08.26特集 HOME特集制作費ゼロなのに高粗利を実現！？沖縄No.1のWeb制作会社社長に「サブスクリプション型経営戦略」の極意とWeb制作のこれからを突撃取材してきた！ こんにちは！Webエンジニアのショーヘーです。 「今はWeb業界の景気がいい！」と言われますが、その分競争が激しくなったことで経営に苦しむ企業も増えています。 どんどん価格競争が激しくなっているため、原価ギリギリで引き受けている企業もあるくらいです。 そんな苦しいWeb業界にありながら、平均月給41.8万円、残業ゼロを実現している超優良Web制作企業が沖縄にあります。沖縄では月給20万を下回ることも珍しくない中、これはとんでもないことです。 その企業の名前は、琉球
モバイルデザインのために再確認すべきヒューリスティック原則
Jordanはビジュアルコミュニケーションに注目し、戦略やサービスデザイン、UX/UIを担当するアメリカのデザイナーです。 Jacob Nielsen氏は多くのデザインパターンを収集し、人間とコンピューターのインタラクションにおけるユーザビリティの構築を指導していました。そして1994年には、それまで学んできたことをユーザビリティヒューリスティックに反映し、それを用いた評価の原則を集めて公開しました。それから25年が経ち、コンピューターがスマートフォンに変わった現在においても、Nielsen氏の唱えた原則はいまだ揺るぎません。 人間中心デザインによってユーザーの重要性に対する認識が高まり、それに応じてデザインプロセスも形を変えてきました。Nielsen氏の唱える原則はあらゆるスクリーンにおいても普遍的ですが、モバイルデバイスの人気が高まり続ける現在、強調すべきはモバイルインターフェイスです
年間で60営業日を削減！？競合分析にかかる手間を一気に削減する「eMark＋」がすごい。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGのセールスマネージャーよすけです。 最近の悩みは、Webサイト制作について競合プレゼンの多い中受注率アップのために提案の質をどう向上させるか？ということ……。提案の質を上げるにはクライアントについて、また業界について裏付けのある情報を十分に集め、さらにその情報を分析する時間と能力が必要です。 分析能力には経験値によって個人差があるので、チーム全体で提案の質をアップさせるとなると途方もない時間と労力がかかり、どうしたものかと悩んでいました。 そこで、以前より知ってはいたけれどあまり積極的に利用できていなかった「eMark＋」という競合分析ツールの力を借りてみたところ…… Webサイトに訪れるユーザーの細かい情報や、ユーザーに求められるコンテンツが素早く簡単に分析できるようになり、提案の質が向上した結果受注率が17%アップ（当社の場合）しました！ 競合分析ツール「eMark＋
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
ベイジで働く意義
2018年7月4日に開催されたベイジの社内全体会議「ベイジサミット」で発表された「ベイジで働く意義」というスライドです。
パーセプションフローモデルとは マーケティング的意味や事例・作り方 | 【レポート】デジタルマーケターズサミット2018 Summer
消費者の「行動」をマーケティング視点で分析する手法として、「カスタマージャーニー」が普及している。しかし、その概念が登場したのは1990年とかなり古い。インターネットの普及を経て、今なお複雑化するデジタルマーケティングの世界で活用するには、限界もある。そんなカスタマージャーニーに対し、認識・知覚を加えてマーケティング分析を行おうという「パーセプションフロー・モデル」が近年注目されている。 「デジタルマーケターズサミット 2018 Summer」で登壇した、FICC inc.代表取締役社長の荻野英希氏。自らの体験を交えつつ、「パーセプションフロー・モデル」によるマーケティング新潮流を解説した。 消費者の“行動”を分析するカスタマージャーニーの限界荻野氏は、講演冒頭に「95％」という数字を掲げた。この数字は何か？ それは「米国のマーケターの95％がカスタマージャーニーを描けない」というものだっ
Internet Explorer の今後について | Microsoft Docs
Internet Explorer の今後について 07/18/2018 2 minutes to read こんにちは。Microsoft Edge / Internet Explorer サポート チームです。 以前に「Internet Explorer および Microsoft Edge での Flash の今後の対応予定について」という記事を公開しましたが、「Internet Explorer」自体の今後の予定についてお問い合せをいただくこともありましたので、今回はそのお話をします。 2014 年の 8 月 7 日に Internet Explorer のサポート ポリシー変更を発表しました。この変更により、2016 年 1 月 12 日をもって各 OS 上で動作する最新バージョンの Internet Explorer のみがサポート対象となりましたが、それから 2 年半が経過し
CSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」
CSS Nite @cssnite 来週土曜日（3月3日）開催のCSS Nite LP56「ウェブサイト制作、手を動かす前に考えておくこと ［Part II］」、あと、若干名、参加可能です。当日決済にて受け付けています。 buff.ly/2EKLEwx #cssnite 2018-02-23 17:45:00 sogitani / baigie inc. @sogitani_baigie CSS Niteのスライド気合入れすぎて100分で語れるか問題勃発。参加者にはお腹いっぱい満足してほしいし、後日復習できるテキストにもしたいし、私の他の講演経験者も満足してほしいのでこのまま行く。好きな言葉ではないが一時的/エピソード的/累積的UXをちゃんと満たす講演＆スライドを目指そう。 2018-02-26 17:09:11 sogitani / baigie inc. @sogitani_baigi
【UD】色覚異常をシミュレーションする方法
色覚異常の割り合い 女性の場合は0.2%と少ないのですが、男性は5%も色覚異常の方がいるそうです。これは日本の場合で、欧米では男性の8〜10%、アフリカでは2〜4%と言われています。色覚異常にもP型・D型・T型などがあり一色単に対応できるわけではないでしょう。CS4からPhotoshopやIllustratorの「色の校正」に色弱のシミュレーションがあるのは知っていましたが、Webサイトのキャプチャを撮って確認するのは少し面倒なので、他にはどんな方法があるのかを調べてみました。 グラフィックソフトの色弱シミュレーション Photoshop Photoshopの場合は、表示メニューの「色の校正」をオンにして、「校正設定」から「P型（1型）色覚」と「D型（2型）色覚」が選択できます。 P型（1型）色覚 D型（2型）色覚 Illustrator Photoshopと同様の手順で、シミュレーション
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーエージェント（UA）文字列は時代遅れ？ ～「Google Chrome」で凍結・非推奨に／早ければ「Google Chrome 81」から警告【やじうまの杜】
“Alexa, Open Adobe XD”: Introducing XD’s Integration with Amazon Alexa
Webサイトリニューアルの7ステップと、よりよいサイトを作るための「要件定義」の勘所 | 【レポート】Web担当者Forumミーティング 2018 Spring | Web担当者Forum
TechCrunch | Startup and Technology News
