デジタル庁デザインシステムβ版
デジタル庁デザインシステムは、スタイリングの考え方を提供するデザイン言語、情報の視覚表現とインタラクションを具現化するUIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです。 「誰一人取り残されない、人に優しいデジタル化を。」の実現に寄与することを標榜し、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイト/ウェブアプリケーション/オンラインサービスまたはシステム等で利用することを念頭に置いて構築されています。
UIデザインで中央配置がずれてしまう理由と解決方法
UIデザインには、至る所に中央揃えが使用されます。 しかし、アイコンとテキストが美しく揃わない、テキストがボタンの中央からずれている、そんなことはありませんか？ UIデザインで中央配置がずれてしまうときの理由、実装時にデベロッパーができること、デザイナーができること、数字的そして視覚的な調整方法などを紹介します。すぐに実装で試したくなることばかりです。 Hardest Problem in Computer Science: Centering Things by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントにおける中央揃え line-heightにおける中央揃え アイコンにおける中央揃え アイコンフォントにおける中央揃え 中央配置がずれているのは、スキルの問題 水平方向の中央揃え
line-heightのハーフ・レディングを打ち消す`calc((1em - 1lh) / 2)`をCSS変数に定義しておくとよい – TAKLOG
lhという単位に見慣れない方もいるかと思われますが、これは現在のline-heightと同じ長さを表す新しく登場した単位です。この例ではline-heightはフォントサイズの1.5倍なので、もし1remが16pxであれば1lhは24pxとなります。 この場合、行の高さと文字の高さの負の差は1em - 1lh、つまり16px - 24pxで-8pxです。それを片方の値を算出するために2で割ると-4pxになります。したがって、margin-block: calc((1em - 1lh) / 2)は、書式のブロック方向（横書き時：上下）にそれぞれハーフ・レディングの大きさ（今回では4px）分のネガティブマージンを設定するということになります。 従来の上下の余白を打ち消す方法との比較lhが登場するまではSassの@mixinなどを使用して以下のような関数を定義し、ハーフ・レディングを打ち消す方法
React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
Instrument | Digital marketing, branding and product experiences | Instrument
Secrets from the Algorithm: Google Search’s Internal Engineering Documentation Has Leaked
Google, if you’re reading this, it’s too late. Ok. Cracks knuckles. Let’s get right to it. Internal documentation for Google Search’s Content Warehouse API has leaked. Google’s internal microservices appear to mirror what Google Cloud Platform offers and the internal version of documentation for the deprecated Document AI Warehouse was accidentally published publicly to a code repository for the c
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もし永続性が心配な場合はご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため） カナ表記は事業所名についてのみ出力されます 事業所名の
株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日は「課題解決力」UPのために、日頃意識している事について書いてみました。 ビジネスパートナーとしての心構えこれまで、WEB制作やマーケティング支援を通じて、課題解決に取り組んできました。しかし、クライアントの中には、WEBサイトの作成やSNSアカウントの設立が目的化してしまうことがあります。 そのような場合、課題を整理し、本当に実現したいことを一緒に探り、具体的な提案に落とし込むことが重要です。単なるデザイナーの枠にとらわれることなく、ビジネスパートナーとして全体を俯瞰し、信頼と成果を得るために、日頃から課題解決力を鍛えることを心がけています。 今回は、課題解決力を高めるために、普段から意識している考え方をnoteにまとめました。 そ
ネットの飽きやすい人を惹きつけるコンテンツ作り解体新書（前編） | Moz - SEOとインバウンドマーケティングの実践情報
読みたくなるコンテンツにするための原則 1 ケンカを売る私は2019年、長文のFacebook広告コピーについてCopyhackersに書いたブログ記事が、その年のマーケティング記事トップ45に入ったというメッセージをLinkedInで受け取った。 サラ、こんにちは！ このたび、2019年のデジタルマーケティング記事トップ45という記事を公開しました。 あなたのブログ記事、「画像は不要： Facebook広告では長い広告文でも効く（Forget the Images: Long Copy for Facebook Ads Works）」がランクインしました。おめでとうございます。 あなたのブログを取り上げた記事はこちらです。 ニコラス 私はこれを読んで、まず次のように思った： ありがたい、どのようにして選ばれたのかはわからないが、自分の記事がランクインしたことをソーシャルメディアで自慢して
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
こんにちは！ 株式会社Rabeeでデザイナーをしています、nanamiです🌿 Webサイトのデザインを作っていく時、気づいたら単調なデザインになってしまうことはありませんか？ 「Webデザインはリズムが大事」とよく言いますが、リズム良く眺めることができるWebサイトって、つい上から下までスクロールしてしまいますよね。 今回は、そんなリズム感を生む工夫の１つ、背景の切り替え方に着目して分析してみました。 前後関係のあるセクションを繋ぐ「矢印型」LPでよく見る形です。例えば、 「こんなお悩みありませんか？」→「それを私たちが解決します！」 というセクションが並ぶ場合、背景に矢印があると目線が自然とその方向に流れるので、ユーザーの視線を特定の場所へ誘導したい場合に効果的です。 Entry Pocketこれだけ薄めの色の背景切り替えでも、矢印型に切り替わっていることで 自然と視線が上セクションか
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
Our world-class embeddings for search, RAG, agent systems.
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
本記事は、実践的にCreate.xyzを用いてサイトを作成する方法を具体例とともに紹介していきます！ 最近追加されたCommand R+やDALLE-3などのAPI Integrationの内容の解説もしていきます。 デモでは自社HPを作り、問い合わせフォームの内容を専用データベースに保存する方法をご紹介します。 Create.xyzで出来ることCreateを使うと、自然言語でサイトの外見や機能を記述するだけで、AIがコーディングを自動で行ってくれます。 プロンプトテクニックとして、デザインやレイアウトを具体的に指定することも重要です。 基本的な作り方については、以下の記事で解説しているので、ぜひこちらもご覧ください！⬇️ と言っても、一から十まで仕様書を書くことは初心者の場合大変なので、今回の記事にはCreateで作成できるサイトの設計書を書いてくれるGPTsとそのプロンプトを記載してあ
主題と副題のマークアップの方法に関しては度々Xでも話題になっていて、例えば次のポストの返信やリポストを見ると、人によって以下のような様々なアプローチがあることがわかります。 参考：過去に話題になったポスト ポストを別枠で表示する 見出し要素（h1〜h6）の中に主題と副題の両方を含めるこの場合の副題はspanではなくstrongやsmallを使うと言った意見も見られる主題をh1要素でマークアップし、副題は隣接するh2要素を使う疑似要素とcontent:attr()を使って副題を表示するこのブログのトップページでも主題+副題が用いられていて、いくつかのマークアップ方法を検討した結果「hgroupの中に主題のh1要素と副題のp要素を含める」方法を選択しました。
現代では、ビジネスを行う企業や個人事業主にとってホームページは必須の存在です。 中でも、使いやすく拡張性の高いWordPressは多くの方から選ばれています。 しかし、数多くのWordPressを使ったホームページ制作会社が存在する中で、自社に最適な業者を見つけるのは容易ではありません。 そこで今回は、Webサイト制作の専門家がWordPressのホームページ制作会社の中から、おすすめの制作会社を8社まで厳選してご紹介します。 それぞれの会社のサービス内容、料金相場、運営実績、評判などの基準を総合的に判断し、厳選した会社のみをご紹介。 WordPressを使ったホームページ制作の依頼を検討している方は、ぜひこの記事を参考にしてください。 WordPressのホームページ制作会社8選【2024年版】 WordPressのホームページ制作を行っている会社の中から、おすすめの制作会社を8社まで厳
自然言語でWebサイトを作れる「Create」 KEITO（以下、KEITO）：はい。次は、今ものすごく話題になってる「Create」です。 池田朋弘氏（以下、池田）：知らないです。 KEITO：ご存じないですか。この1週間でめちゃくちゃ話題のサービスになっていて、自然言語でWebサイトを作れるものなんですけど。ChatGPTでもコードを吐き出したりできるので、Webの形を作るのはなんとなくできそうだとは思うんですけど。Createだと、その作ったWebサイトに機能を入れることができるんですよね。 具体的に言うと、この右側が、僕が作ったやつです。「KEITOチャットAI」と言って、「こんにちは」と送れば、裏側でChatGPTが動作してしっかりと返してくれる。このチャットボットを、本当に30分ぐらいで作りましたね。しかも僕、プログラミングなんて一切できないので。本当に自然言語だけで「チャット
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語 杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。 Perlの好きなところ、今後サポートしてほしいところ （スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかん
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけでさまざまな形状を簡単に実装できる -CSS Shape
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけでさまざまな形状のシェイプを実装できるコードをまとめたCSS Shapeを紹介します。 さまざまな形状はdivだけでなく、imgで画像にも実装することもできます。 The Ultimate CSS Shapes Collection The Ultimate CSS Shapes Collectionを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回はさまざまな形状を実装するシェイプです。
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
カード型コンポーネントの実装例 ｜ TAKLOG
このブログの記事一覧のアップデートを行ったので、それを踏まえたカード型コンポーネントの実装メモです。次の実装例の解説をしながらカード型コンポーネントの実装時のポイントを説明していきます。 例に漏れず初学者の方は置いてきぼりの内容になってしまっていることと、個人的な見解が多く含まれる俺流な内容であることはご了承ください。 カード型コンポーネントの実装例
こんにちは！SSRを刺されと読むMizutani(@sirycity)です。CSRは腐れです。 今日はFirebaseとAstroとSSRについてです。 結論 Firebase Hosting(とFunctionsとCloud Run)ではAstroをSSRモードで動かすことができます。だが設定が本当にめんどい。 はじめに Firebase hosting(以下hosting)は静的サイトのホスティングサービスです。で、Astroは静的サイトジェネレーターです。つまりAstroで作ったWebサイトはhostingにデプロイできます。まあ当たり前ですね。 hostingのサーバーサイドレンダリング(SSR)について hostingは一部のFWについては例外的にサーバーサイドレンダリング(以下SSR)をサポートしています。サポートしてるFWは以下の通り。 FirebaseExtended/fi
はじめまして。 株式会社Rabeeのtotoです🐝 デザイン・EC・マーケティングでの職務経験から得た、働きやすさに繋がるヒントをnoteに記していきたいと思います。 本日はデザインフィードバックを成功に導くための６つのヒントについてお伝えします！ お時間の無い方は「チェックリスト」だけでもサクッと目を通してみてください✅ デザイナーの皆さま。 クライアントのフィードバックを受ける際、どのような準備をしていますか？ 恥ずかしながら、私がデザイナー駆け出しの頃は「フィードバックを受ける準備」を怠っていました。 その結果、大規模な修正やスケジュールの圧迫、フィードバック通りにやったのに満足度が上がらず、 最後には方向性を見失う事態に。 まさに「こんなはずじゃなかった！！」という状況でした。 このような状況は事前の準備や心構えで軽減できます。 時間に追われながら身を削って修正をしたあの日を繰り
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
アプリやWebサイトをデザインする際に、情報をまとまりごとに線で区切ることがあります。リストの各項目を区切ったり、コンテンツをセクションごとに区切ったりする場合です。この区切り線は"Divider"と呼ばれます。 このDividerの線幅について、国内外のサービス各社の対応を調べてみました。 iOSとAndroidのDividerの線幅の違いiOSアプリのリストはSwiftUIで以下のように実装できます。 var body: some View { List { Section(header: Text("タイトル")) { Text("テキスト") Text("テキスト") Text("テキスト") } } .listStyle(.plain) }これをプレビューすると、各リストの間に 物理ピクセル数 1 の太さの線が表示されます。 iOSアプリのリストAndroidアプリのリストは以下
その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://searchengineland.com/google-search-document-leak-ranking-442617
codefolio | Webコーディングの参考になるパーツ集・ギャラリーサイト
無料で商用にも使える日本の郵便番号APIをリリースしました
Webデザイナーが実践する「課題解決力」UPのヒント！｜toto｜Rabee.inc
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita
ページに抑揚をつける「背景切り替え」のデザインアイデア｜nanami
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
静的ウェブサイト作成ガイドは個人サイト再興に資するか - YAMDAS現更新履歴
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
Reader API
令和のHTML / CSS / JavaScriptの書き方50選
【プロンプトあり】 Create.xyzで本格的なWebサイト制作をしてみよう｜ChatGPT研究所
主題と副題のマークアップにはhgroupを使用する – TAKLOG
WordPressのホームページ制作が得意な会社8選！おすすめのWebサイト作成会社【2024年】
プロに依頼するほどでもない画像加工を自分でこなすには？ 「AIを使って画像をどうにかきれいにしたい」人を救う、実務で使えるツール
「説明サイトとリファレンスサイトの両立を目指したい」 「とほほのWWW入門」管理者・杜甫々氏が執筆時に気をつけていること
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
Firebase HostingでAstroをSSRモードにして動かす時の設定 | JavaScriptに関するお知らせ
これで翻弄されない！デザインフィードバックを成功に導く６つのヒント｜toto｜Rabee.inc
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
iOSとAndroidの"Divider"の線幅の違いと各社の対応｜鈴木慎吾 / TSUMIKI INC.
表記揺れ検出ツール「テキストゆれないくん」 - inzkyk.xyz
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
紙っぽいかわいいWebサイト作りたい - Qiita
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？