デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
Hori Blogフリーランスでバックエンドエンジニアとして活動している Ryota Hori のブログです。 最近はテック系記事より雑記ブログ気味。 ご縁がありまして「しいたけ占い公式サイト」の開発に携わりました。 比較的シンプルなページ構成ですが、高トラフィックを快適に提供する Web サイトとして色々と工夫したので記録に残しておきます。似たような構成の Web サイトを構築する際の参考になれば幸いです。 （技術的開示および実績公開に関してはしいたけ.さんより許諾を頂いております。ありがとうございます。） 「しいたけ占い公式サイト」とは 占い師であるしいたけ.さんが占いコンテンツを連載する公式サイトです。 しいたけ占いの公式サイト。占い師しいたけ.が 12 星座別の運勢をオーラカラーと共に診断。毎週月曜日更新の週刊占いと、上半期、下半期占いをお楽しみいただけます。 しいたけ占い公式サイ
Glassmorphism（グラスモーフィズム）は、昨年末ごろより「ニューモーフィズムの次はこれだ。」と話題になっているデザイン手法です。 この記事では、グラスモーフィズムの基本や作成上の注意点、コピペで実装できるジェネレーター、参考HTML/CSSスニペットまでまとめてご紹介します。 グラスモーフィズムって何？ 2020年末ごろより人気が高まっているスタイルで、静かな不発トレンドとなったニューモーフィズムのプラスチックな質感に対して、すりガラスを通して覗いたような背景のぼかしが特長です。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ グラスモーフィズム・スタイルで押さえておきたいのが、以下の4つのポイントです。 透明度（英: Transparency）: 背景のぼかしを使用したガラスのようなエフェクト 空間に浮遊するオブジェクトを用いた
「アジャイルテストの4象限」はアジャイル開発を補完するソフトウェア開発手法である - mtx2s’s blog
従来のプロジェクトにおける「テスト」は、リリースや納品前の最終工程として行われるものだ。多くのケースでそれは、前工程までの遅れと、それでも固定されたままのリリース日に挟まれ、予定された期間を食いつぶされた中で実施される。その上、時間に追われる中で実装されたソフトウェアは、動作確認も十分にされない状態でテストフェーズをむかえることになる。こうして品質の保証は、テスターに丸投げにされるというのが実態ではないだろうか。もちろんここでテスターに丸投げされているのは外部品質、特に機能面での品質の保証のみだ。非機能面での品質の保証は手薄になり、内部品質は顧みられることはない。 これは、ウォーターフォール開発を採用するプロジェクトで私が頻繁に経験した失敗パターンであるが、アジャイル開発でも遭遇する。その理由は、そのままのテストモデルがアジャイル開発の中でも用いられるために、同様の失敗パターンに陥りやすく
【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
freeeアクセシビリティー・ガイドライン — freeeアクセシビリティー・ガイドライン Ver. 202404.0-RELEASE+4.3.7
このガイドラインは、参考情報の追加や表現の改善などで、随時更新されます。 リリース:Ver. 202404.0-RELEASE+4.3.7 ガイドライン・バージョン：Ver. 202404.0-RELEASE チェックシート・バージョン：4.3.7 更新日:2024年4月23日
Prologue こんにちは、 @dz_ こと、大平かづみです。 今回はこのブログ記事 "5 automations every developer should be running" が気になったので、ちゃんと読むついでに要約してみました。（ブログ駆動） なお、英語の能力は高くないので、誤訳などありましたらご連絡いただけたらうれしいです🙇🏻♀️ 要約: "5 automations every developer should be running" TL;DR: セキュリティ脆弱性との闘いや動かないボタン、遅いサイト、リリースノートを手書きすることを避けたいエンジニアの君に捧ぐ テストを書くことや改善のための自動化を行うことは大事ではあるが、実際のところもっとコードを書いた方が楽しい！ さいわいなことに、GitHub Actions ではたくさんのコミュニティで作られたテストや
(2022/4/28) フォローアップ記事となる、ジェイソンさんの記事の翻訳版を公開いたしました。 「HTML3.2のどこが「間違って」いるのか、そしてそれを見た目重視のクラスで再現するのがおかしいわけ」 先日投稿した「「阿部寛のホームページ」はHTML界のシーラカンスである」の続編として、MediumのHTML関連の記事でセマンティックではないHTML・CSS（特にTailwind CSS）に対し舌鋒鋭い批判をしていらっしゃるJason Knightさんに、英語版の記事を見ていただいた。しっかりコードを分析されているようで恐縮である。忌憚・忖度の無いセカンドオピニオン的知見としてご覧いただければ幸いである。 (2022/4/22) 上司から会社の名前を載せて書いているのに、表現が過激すぎるのではないかとお達しがあったため、表現をマイルドにして、原文を削除した。大変申し訳ありませんでした。
チキささ on Twitter: "パラリンピックを取り上げるときに、障害者が広くスポーツを楽しめるようなサポートやアクセシビリティ改善が着目されることはほとんどなく、当人や家族、友人の支えによって(自助と共助で)障害を克服する「感動」の側面だけが注目を浴びる。そのことは結局、ほとんどの障害者をさらに追い詰める。"
パラリンピックを取り上げるときに、障害者が広くスポーツを楽しめるようなサポートやアクセシビリティ改善が着目されることはほとんどなく、当人や家族、友人の支えによって(自助と共助で)障害を克服する「感動」の側面だけが注目を浴びる。そのことは結局、ほとんどの障害者をさらに追い詰める。
【データ基盤チーム ブログリレー 3日目】 こんにちは、エンジニアリンググループの石塚です。 趣味は筋トレです。好きなトレーニングはレッグカールです。今年2023年の1月に第一子が爆誕し、毎日子供の笑顔に癒されております。一方であまり言い訳にはしたくはないですが、事実自分自身の自由に使える時間は少なくなったなと感じております。そんな中でもトレーニングの時間は作りたいので、24時間ジムに契約して妻と娘が寝ている早朝の時間にウホウホトレーニングをしている今日この頃であります。時間のありがたみをとても感じるようになりました。 これは仕事でも同様かと思います。有限な時間の中でタスクを取捨選択して価値ある成果を上げていく事が仕事では求められます。ドキュメンテーションはその価値ある成果につながる時間を増やす一助になるかもしれません。 この記事では、ドキュメンテーションの必要性について言語化します。改め
こんにちは！クラシルiOSアプリを開発しているknchstです。 昨今のモバイルアプリケーション開発では様々な要件があり、それらを満たすよう実装するには数々の苦難がありました。その一つとしてUIの状態、所謂State管理が難しくなってきています。ネットワークに接続し、またUIをアニメーションさせたりと、データとUIを同期するのは困難を極めます。 Rxなどのリアクティブフレームワークの利用が当たり前になり、ReactNaviteやFlutterなどのフレームワークをプロダクトに採用する企業も増えてきて、モバイルアプリのトレンドの風も、まさにこの方向に向かって吹き始めていました。 そして今年のWWDCでAppleがSwiftUIを発表してついに、その風は大きくなり今後のモバイルアプリの方向性を決定付けたと言っても過言ではないでしょうか。 今回は、SwiftUIとFlutterでアプリを開発する
みんなで使えるデザインガイドライン「SmartHR Design」ができました｜SmartHRオープン社内報｜株式会社SmartHR
※ 2020年 9月 3日 追記 デザインシステム「SmartHR Design」がお引越し&アップデートしたため、最新情報はこちらからご覧ください。 おつかれさまです。コミュニケーションデザイングループのさめまる（@samemaru_saxo）です。 このたび、だれでも！効率よく！SmartHRらしく！表現できるのを目標とした、デザインガイドラインができました！ ▶️ SmartHR Design https://smarthr.design （2020年9月3日更新） 社外の方でもどなたでも読めるように一般公開しています。 SmartHR Design とは SmartHRでは、資料やスライド、オウンドメディア、このオープン社内報など、日々どのメンバーもばしばしアウトプットしています。中には見た目のデザインが必要なものもありますが、どれもデザイナーに依頼して作る余裕があるとは限りません
新年あけましておめでとうございます。 昨年はあっという間に過ぎ去ってしまったので、2023年はたくさん開発していきたいです。 はじめに はじめまして、kosei28という者です。 普段は大学に通いながら個人開発している19歳です。 この度、Chatockという掲示板のようなWebアプリを開発したので、紹介させてください。 つくったもの スレッドを作って、その中に投稿することができます。 スレッドにはタグをつけることができて、タグによってスレッドを検索することができます。 いいねをすることもでき、いいねしたスレッドや投稿は自分のライブラリページから見返すことができます。 背景 さて、皆さんはSvelteKitを知っていますか？ SvelteKitとは、SvelteのWebアプリを開発するためのフレームワークで、ReactにおけるNext.jsのようなものです。 ルーティングやSSRなどができ
実装者が作業前にデザイナーへ確認しておくとよいこと
TAK(@tak_dcxi)です。 コーダーやフロントエンドエンジニア（以下実装者と呼ぶ）が作業に取り掛かる前に事前にデザイナーに確認しておくとよいことを独断と偏見でまとめました。過去に面倒臭がって聞くのを放棄して失敗した経験もあるので、自戒の念も込めています。 デザインの共通ルールを確認する 余白のサイズやフォントサイズや使用している色などはルール決めがされているとは思いますが、デザインのルールを実装時に分かりやすくしておくことで効率的かつ保守性や拡張性に強いコードが書きやすくなります。 逆に実装時にルールが分からないと、実装者がデザインカンプを見てもそのルールを理解するのに時間がかかってしまうことも多いです。余白であれば感覚で配置されてるのか、似たような箇所で17pxであったり23pxであったり…と意図が分かりかねる場合もあります。余白は原則8の倍数で行うみたいなルールが事前に実装者に
heyのSTORESでECの開発をしている@nkobaです。 この記事ではフロントエンドで使用しているUIライブラリについて発信していきます！ 社内UIライブラリとは STORESのECではSTORES.jp-Front-Commonというフロントエンドライブラリを作成しています。 その一部としてUIライブラリが含まれており、これを社内プロダクトで利用することで開発効率を向上させたり、ユーザーにとっての触り心地を担保しています。 基本的にSTORESのECではブランド、デザイン、使い心地などを表現するために、ほぼ全てのUIは自作しています。 社内UIライブラリで主に使用している技術は以下になります。 Vue.js Storybook REG-SUIT Jest コンポーネントライブラリの実際 実際に使われているページ 導入期 背景 私がフロントエンドチームに加わったのは2018年の末頃でし
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
「こんなことできちゃうの?!」「もっと早く知りたかった。」 この記事では、ホームページ制作を快適にする最新オンラインツール48個をまとめてご紹介。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな便利な新ツールを揃えています。 時間の短縮はもちろん、面倒だったあの作業も自動化できてしまうことも。 大型連休中におすすめのワクワクするようなツールを集めました。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール（14個） 2. デザインツール（13個） 3. 配色ツール（5個） 4. プロトタイプ・アイコンツール（6個） 5. クリエイティブ・面白ツール（10個） Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Webデザイン便利ツール Loaders
この記事では、あまり知られていないCSSの小技20個を実例サンプルと一緒にご紹介します。 わずかなコードで実装可能なテクニックばかりで、ウェブ制作でも気軽に活用することができます。 HTMLの小技テクと一緒に活用してみてはいかがでしょう。 【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選 そもそもCSSってなに？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLなどのマークアップ言語で書かれた文書の表示方法を記述するためのスタイルシート言語です。CSSは、HTMLやJavaScriptと並んでWebの主要な技術です。 CSSは、レイアウトや配色、フォントなど、デザインとコンテンツを分別することを目的としています。これによって、コンテンツのアクセシビリティの向上、デザインの柔軟性やコンテンツの制御しやすさ、関連
この記事は、Mercari Bold Challenge Monthの1日目の記事です。 こんにちは、MercariのArchitectチームでDesign Systemに取り組んでいる@usagi-fです。 Design Systemはただのスタイルガイドラインではなく、会社として保持するデザインフィロソフィーから実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉として認知されてきています。 現在私たちは本格的に構築へ着手しており、少しずつ進捗が見えてきました。この記事では主にDesign Systemにおける「UIコンポーネントの定義と実装」の部分に焦点をあて、私が担当しているWeb Frontendの事例を紹介していきます。 MercariにおけるDesign System Mercariでは将来的な組織規模の拡大に向けて様々な取り組みを行っていますが、Design
アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
freeeアクセシビリティー・ガイドラインを一般公開しました - freee Developers Hub
こんにちは、freeeの自称「アクセシビリティーおじさん」の中根といいます。 freeeで働き始めて間もなく2年くらいになりますが、このブログには初めて投稿します。 今日は、4月30日にVer. 202004.0を一般公開したfreeeアクセシビリティー・ガイドラインをご紹介しようということで出てきました。 (このバージョンが一般公開した最初のバージョンです。) a11y-guidelines.freee.co.jp そもそもアクセシビリティーって? 「アクセシビリティー (accessibility)」という言葉については、いくつかの公式な定義があるはずですが、僕は分かりやすく、 誰でも、ほぼ同じコストで、ほぼ同じようにサービスや情報を利用できる そういう状態を「アクセシブルな状態」、「アクセシビリティーが高い状態」としています。 「誰でも」というのは、文字通り、年齢、性別、利用環境、障
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
当社のフロントエンドコーディング標準技術について
当社はConcrete CMSを用いたWebサイト構築を主な業務としております。また、フロントエンドのみの構築（いわゆるコーディング）のご依頼も承っております。その中で、ご依頼の際に当社が標準的に採用している技術についてご説明する機会は多々ありますが、対外的にまとまって記載したページがこれまでなかったため、こちらのブログにまとめることとしました。ご依頼いただく際の参考にしていただければ幸いです。 CSSフレームワーク 当社ではCSSフレームワークとして Tailwind CSS （テイルウィンド・シーエスエス）を採用しています。Tailwind CSS は、2022年の調査において、直近４年間を通して満足度・興味・利用率の全てで１位を獲得し続けている、現在のフロントエンドデベロッパーから最も支持されているフレームワークです。Microsoft, Google, GitHub, Shopif
デジタル庁のサイト、その後… - Qiita
はじめに 第1弾で多くの評価と批判をいただきました。 そして、第2弾もそこそこの評価をいただきました。 第3弾は全くの不発でした。 そして2023年11月1日、正式にリニューアルがされました。 今回第４弾はリニューアルされたデジタル庁のサイトについて書いていきます。 Next.jsからDrupalへ まず、試作版のデジタル庁のサイトがこちらです。 今現在は試作版のサイトが閉鎖されていて、手元にスクショがなかったので、webarchiveから取得しました。 こちらがデジタル庁のサイトです。 最初見た時、「そのまま試作版のサイトを本番サイトにしたのねん」と思いました。 しかし、よくよく調査すると、大きく変わっていることに気づきました。 なんと、Next.jsからDrupalに変わっているではないですか！！！ これはびっくりしました。第一弾の記事で、デジタル庁のサイトにNext.jsが使われてい
CSSでテキストに下線を引く場合、皆さんはどのプロパティを使いますか？ text-decorationかborder-bottomか、はたまたbackground-imageプロパティか…。いろいろな方法で下線を引けるために、どれを使えばよいのか迷った経験がある方もいるでしょう。 この記事ではテキストの下線を引く方法を場面別に紹介します。 たくさんの下線を引く方法があってどれが良いのかわからない方。シンプルな単語の装飾でも、3点リーダーがある場合でも、アニメーションさせる時でも、どんな時でも下線を引く方法を探している方。装飾に使えるCSSを広くサラッと知りたい方。王道の内容をおさらいしたい方。本記事は、そんな皆さんに向けた内容となっています。 場面別に下線を引く方法まとめ ▲場面別に下線を引く方法まとめ。クリックで拡大してご覧ください。 いきなりですが、場面別に最適だと考えられる下線の引
Flutter 2.8がリリース。モバイルアプリの性能向上、2Dゲーム向けフレームワーク「Flame」登場 Dart言語のフレームワーク「Flutter 2.8」正式版がリリースされました。 Hello and welcome to Flutter 2.8! Performance improvements New @Firebase features Desktop status Tooling updates And MORE! Read the blog by @csells https://t.co/QDhRck0DJv pic.twitter.com/FdEuZIqjxa — Flutter (@FlutterDev) December 9, 2021 Flutterは単一のコードベースでiOS、Androidのネイティブなモバイルアプリケーション、Windows、Mac、Lin
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 デザインディレクション・ブック 橋本 陽夫 現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】 小川 卓 解釈可能なAI Ajay Thampi(著), 松田晃一(翻訳) PowerPoint 目指せ達人 基本&活用術 Office 2021 & Microsoft 365対応 PowerPoint基本＆活用術編集部 ランサムウェア対策 実践ガイド 田中啓介, 山重徹 TODによるサステナ
科学的知識は主に書籍や科学誌に保存されていますが、PDF形式が一般的です。しかし、この形式は特に数学的表現においてセマンティック情報の損失を引き起こします。この問題に対処するために、Meta AIの研究チームは『Nougat（Neural Optical Understanding for Academic Documents）』という新しいOCR（光学式文字認識）技術を開発しました。 Nougatは、数式や文章が複雑に配置された画像であっても、それをマークアップ言語に高品質で変換する能力を持っています。この技術は、新しい論文だけでなく、電子データが存在しない古い書類などの解析にも非常に有用です。 参照論文情報 タイトル：Nougat: Neural Optical Understanding for Academic Documents 著者：Lukas Blecher, Guillem
複数のMacで1組のキーボードとマウスを共有できるオープンソースのバーチャルKVM「Teleport」が約5年ぶりにメンテナンスを再開し、macOS 11 Big SurやApple Siliconに対応。
複数のMac間で1組のキーボードやマウスを共有できるバーチャルKVM「Teleport」が約5年ぶりにメンテナンスを再開し、macOS 11 Big SurやApple Silicon Macに対応しています。詳細は以下から。 プライベートや仕事、検証用に複数のMacを所有していると、並行して利用する際に接続された複数のキーボードとマウスでデスクトップがいっぱいになってしまう事があり、この問題を解決してくれるKVM(Keyboard, Video and Mouse)やCPU切替器というデバイスが広く販売されていますが、 このKVMをソフトウェア的に行ってくれるMac用バーチャルKVM「Teleport」が、最近になりmacOS 11 Big SurやIntelとApple Silicon Macに対応したUniversal 2 Binaryアプリとして公開されています。 Teleport
デザイン業務ではしばしば“奇抜さ”が求められることがあります。人間は常に新しい形や刺激的な表現を求めていて、誰もが思いつくようなものでは受け入れられないことも多々あります。そのことは十分に承知の上で、私は良いデザインとはどこか“普通の形”をしているものだと考えています。普通というとなんだかネガティブにも捉われがちですけれども、環境に融け込んでいて違和感がないという意味で、普通であることはデザインの目指すべき一つの姿なのではないかと思います。はじめ奇抜な形をしていたものが次第に社会に受け入れられていって、いつからか「普通」になっているようなこともあります。｢新しくあること」と「普通であること」は必ずしも二項対立の関係ではありませんが、どちらを取るべきかでしばしば頭を抱えてしまうデザイナーは私を含め多くいらっしゃるのではないでしょうか。 UIデザインの世界を見てみても、やはりどこか「普通ではな
iOS 15では雨や波、小川のせせらぎなどの自然音や心地よいノイズをバックグラウンドサウンドとしてApple Musicやシステムサウンドと一緒に再生することが可能に。
iOS 15では雨や波などの自然音やダークノイズなどをApple Musicやシステムサウンドをと一緒に再生することが可能になっています。詳細は以下から。 雨が降る音や川の流れ、海で波が押し寄せる音など、いわゆる自然音(環境音)は集中力を高めたり、リラックスできるとしてYouTubeやSpotifyなどの動画/音楽配信サービスで人気のカテゴリーの1つですが、 Appleは2021年06月に開催したWWDC21で発表したとおり、海や雨、小川のせせらぎ、心地よいノイズなどをApple Musicやシステムサウンドと一緒に再生できる「バックグラウンドサウンド」機能を新たにリリースした「iOS 15/iPadOS 15」に追加しています。 バックグラウンドサウンドを再生する バックグラウンドサウンド機能はWWDC21でAirPodsの新機能の1つとして紹介されていましたが、この機能はiOS 15/
ウェブ制作に活かすユニバーサルデザインの視点
この記事は、2019年12月7日に名古屋で開催された WCAN 2019 Winter での登壇内容をテキスト化したものです。アクセシビリティ Advent Calendar 2019 の 9日目のエントリーです。 当日使用したスライドは SpeakerDeck で公開しています。 ウェブ制作に活かすユニバーサルデザインの視点｜SpeakerDeck はじめに 「ユニバーサルデザインとウェブ」と聞くと、あまり馴染みがないように思われるかもしれません。しかし実は、ウェブは生まれながらにユニバーサルな性質を持っています。ワールド・ワイド・ウェブの考案者ティム・バーナーズ＝リーは、次のように述べています。 The power of the Web is in its universality. ウェブは、世界中の誰もが、自分の好きな場所で、好きなデバイスで、好きな時にアクセスすることができます。
こんにちは。Goodpatch UIデザイナーの金谷です。 最近、ChatGPTで話題沸騰のAI。機械学習、ディープラーニングなどの技術の進歩が著しく、自然言語処理、画像認識、音声認識などの分野で、驚異的な精度と高速な処理能力を発揮しています。 ChatGPTにいろいろな「仕事」をさせる実験が流行っていますが、私自身もAIに負荷が高い（面倒）な作業を肩代わりしてもらえないか、実験をしてみたくなりました。 個人的な願いですが、AIの活用によって業務効率が飛躍的に向上するといいなと考えています。より創造的なタスクに時間をかけられ、品質の高いものを生み出せたり、人間が意思決定をする上で、十分な情報や条件がすぐにそろったり。 というわけで、デザインのワークフローにおけるどんな課題を解決できるのか、順に追って考えてみたいと思います。 Webアプリ・モバイルアプリデザイナーのワークフローごとに面倒な作
ソフトウェア開発における品質のメトリクスについて、新旧2冊の本を比べてみました。 1冊は、『初めて学ぶソフトウェアメトリクス』。 原著『Five Core Metrics: The Intelligence Behind Successful Software Management』（Lawrence H. Putnam、Ware Myers著）は、2003年に出版されています*1。 初めて学ぶソフトウエアメトリクス~プロジェクト見積もりのためのデータの導き方 作者:ローレンス・H・パトナム,ウエア・マイヤーズ日経BPAmazon もう1冊は、『アジャイルメトリクス』。 原著『Agile Metrics in Action: How to measure and improve team performance』（Christopher W. H. Davis著）は、2015年に出版されて
UIパーツにメイリオを指定しないほうがいい理由
はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると
筑波大学BHEでは、2019年度より発達障害当事者の職員（ダックスさん）を雇用し、「マンガ」を通した発達障害の理解・啓発活動をスタートしました。 作成したマンガは随時、BHEアクセシビリティ支援チーム（旧DACセンターアクセシビリティ）のTwitterで配信をしています。 また、過去に配信したマンガについては、このページで掲載しています。 ヒトはそれを『発達障害』と名づけました BHE広報担当のダックスさんによる発達障害の啓発マンガです。 色々な発達障害を併せもつダックスさんと、ASDのネコさん、ADHDのトリさん、LDのサカナさんなどかわいいキャラクターを通して、発達障害について理解する・伝えるきっかけとしてご活用ください。 なお、マンガを通して発達障害を多くの人に理解・啓発するため、発達障害啓発マンガはCC0 1.0（パブリック・ドメイン提供）ライセンスを適用しています。 そのため、こ
片手が使えない状態でも楽しめるゲームは？ 腕を折ってしまった海外ゲームファンが掲示板で助けを求める
もし手を怪我をしてコントローラーが握れなくなったら、ゲーマーはどうするだろうか。海外フォーラムRedditのユーザー「ItsAMooseLifeForMe」氏は事故で腕を折ってしまい、ギプスが外れるまでの約3週間を不自由な状態で過ごさなければならなくなったゲームファンだ。ゲームをプレイしようと、モンスターをハントするアクションゲーム『Dauntless』を試したものの、やはり片手では難しかった。 困り果てた氏は、Redditに「腕が折れていても遊べる、スローペースあるいはターンベースのゲームはありますか？」というスレッドを立て、多数の回答を得ている。この記事では、もし片腕しか使えなくても遊べるかもしれないゲームとして寄せられたコメントをいくつか紹介していこう。 （画像はSteam | 『XCOM2』より） 『XCOM2』はFiraxis Gamesが開発し2016年にリリースされたターンベ
2020年3月28日、NPO法人国際ゲーム開発者協会日本（IGDA日本）主催の特別ウェビナー「『Fortnite』のユーザーエクスペリエンス」が開かれました。講演者は、世界的ヒットゲーム『Fortnite』のUXディレクターで、書籍『ゲーマーズブレイン UXと神経科学におけるゲームデザインの原則』の著者としても知られるセリア・ホデント氏。自身が携わった『Fortnite』開発時の事例を中心に、ゲームのUXデザインや人間の脳のしくみについて解説しました。 ※この記事はIGDA日本に許可をいただき、ログミーTechが独自に編集したものです。内容についての責任は弊メディアにあります。 『Fortnite』のUXのフレームワーク セリア・ホデント氏（以下、セリア）：では次に、『Fortnite』のチーム内で使っていた、ゲームUXのフレームワークをちょっと紹介したいと思います。 ゲームのUXは基本的
『サイバーパンク2077』に対する見解に関して、「サイバーパンクを通じて意図を表現する」という昨今の潮流にない、つまり「サイバーパンクという概念を描くこと」自体を目的とした「ニューロマンサー」直系の作品が超大作の形をなして久々に登場したーー人間が生み出した科学技術に自身が振り回されているこの時代にーーという見方があるが、私としてはそれ以上に本作がゲームという表現形態において成し遂げた偉業について注目したい。 私とゲームの間には、いつも一枚のスクリーンがあった。今、それはもう無い。 ※本稿はCD PROJEKT RED提供レビュー用コード（PC版）でのプレイにもとづき執筆（プレイ期間は12月1日〜12月10日）。レビュー用のプレイには、別途、国内BTOパソコンメーカーのマウスコンピューターより提供を受けたゲーミングPC「G-Tune HM-Z」を使用した。「G-Tune HM-Z」にて同作を
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブデザインに見るデザインカンプと実装との溝
「しいたけ占い公式サイト」を支える技術 | Hori Blog
グラスモーフィズム？CSSコピペできる新Webトレンドの参考HTMLスニペット、ツールまとめ
Check! GitHub Actions で導入しておきたい自動化 5つ（GitHubブログ要約）
海外のガチHTMLコーダーに阿部寛のホームページを見てもらった - Qiita
エンジニアリングの時間を生み出すドキュメンテーション術 - エムスリーテックブログ
宣言的UIフレームワーク 「SwiftUI」と「Flutter」を比較してみた - dely Tech Blog
SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
社内UIライブラリの変遷 - STORES Product Blog
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
こんなことできるの?!ホームページ制作が楽しくなる最新オンラインツール48個まとめ
【CSS】知っておくと便利！短いコードで実装できるCSS小技20選
Design Systemへの取り組み 〜Frontend編〜 | メルカリエンジニアリング
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA
Flutter 2.8がリリース。モバイルアプリの性能向上、2Dゲーム向けフレームワーク「Flame」登場
Splide - アクセシビリティに配慮した軽量・高機能スライダー
数式や文章がぐにゃぐにゃに曲がった論文PDFでもくっきり認識する画期的なOCR『Nougat』 | AIDB
UIデザインと守破離の精神｜Goodpatch Blog グッドパッチブログ
デザイナーの仕事は AI でラクになる？実際に試してみた｜Goodpatch Blog グッドパッチブログ
従来とアジャイルで、品質メトリクスには本質的な違いがあるのではないか - ソフトウェアの品質を学びまくる
発達障害啓発マンガ - RADD 発達障害学生支援プロジェクト
ゲームの「作業感」をどう軽減するか？ 『Fortnite』開発者が語る、ゲームUXのフレームワーク
『サイバーパンク2077』レビュー。人生の追想を実現する、RPGの極点 - AUTOMATON