デザイナー「平田 章」のブログ兼ポートフォリオサイトです。Webフロント技術やUIデザインなどの情報を発信しています。https://hira.page/https://hira.page/ja/blog/bar-ui-naming/https://hira.page/ja/blog/bar-ui-naming/モバイルアプリのUIでは、Navigation BarやToolbarなど、Barという名称がついたUIがたくさんあります。ここ最近で、iOSもAndroidも両方がらっとそれらの名称・仕様が変わっています。特にNavigation Barという名称は、iOS or Android、現在 or 以前でどのUIを指すのか非常に紛らわしいです。この記事ではそれぞれのOSでの名称や外観を表にして、公式仕様へのリンクをまとめます。Thu, 28 Aug 2025 00:00:00 GMThttps://hira.page/ja/blog/tailwind-react-styling-issues/https://hira.page/ja/blog/tailwind-react-styling-issues/Tailwind CSSとReactの組み合わせに私が感じている課題点について解説します。スタイル定義と文書構造の混在、scoped CSSの利用に関する不満、そしてAstro, Svelte, Vueといった他のフレームワークとの比較などですSat, 22 Mar 2025 00:00:00 GMThttps://hira.page/ja/blog/2024-best-buy/https://hira.page/ja/blog/2024-best-buy/2024年に買って良かったものリストです。年始に毎年書いてます。Mon, 13 Jan 2025 00:00:00 GMThttps://hira.page/ja/blog/minimal-house-cleaning/https://hira.page/ja/blog/minimal-house-cleaning/基本的に超ズボラ人間なのですが、いつ人が来てもいい程度には部屋がキレイな自信があります。10年以上・4箇所の賃貸に一人暮らしをして、キレイをキープする一番ラクな掃除方法がわかってきたのでまとめてみます。年末で大掃除の時期も近いですし、BlackFridayで買うのにオススメの掃除グッズもたくさん紹介します。Mon, 25 Nov 2024 00:00:00 GMThttps://hira.page/ja/blog/designer-left-hand-happy/https://hira.page/ja/blog/designer-left-hand-happy/作業効率化の記事です。右手マウスを使っているデザイナー・クリエイター・それ以外の方もぜひ。左手デバイスのおすすめも紹介。Thu, 11 Apr 2024 00:00:00 GMThttps://hira.page/ja/blog/2023-best-buy/https://hira.page/ja/blog/2023-best-buy/2023年に買って良かったものリストです。年始に毎年書いてます。Mon, 08 Jan 2024 00:00:00 GMThttps://hira.page/ja/blog/kvm-display/https://hira.page/ja/blog/kvm-display/PCモニターのKVM・PBP・PIPといった機能をご存知でしょうか。1つのディスプレイ端末やマウス・キーボードで複数のPCを繋ぐとき、それぞれの使い分けが楽になります。モニター選びのときにあまり気にしたことがない人は、ぜひ一度チェックしてみてください。Wed, 06 Dec 2023 00:00:00 GMThttps://hira.page/ja/blog/2022-best-buy/https://hira.page/ja/blog/2022-best-buy/2022年の買ってよかったものです。「ホームジム」作ったのと「カバンの中身」を見直したのでそれ系が多めですSun, 08 Jan 2023 06:46:48 GMThttps://hira.page/ja/blog/vc-with-switch/https://hira.page/ja/blog/vc-with-switch/Nintendo Switch でボイスチャットしながらゲームをやる場合、ゲームの音声と通話の音声をどのように聞き分けるかが問題になります。本記事では私がいろいろ試したイヤフォン環境の最適解と、選択する上で知っておくと良い情報をまとめています。スプラトゥーン3で友達と快適な環境を用意しましょう！Mon, 22 Aug 2022 09:42:41 GMThttps://hira.page/ja/blog/responsive-for-android-foldable/https://hira.page/ja/blog/responsive-for-android-foldable/自社アプリでフォルダブル(折りたたみスマホ)対応をしたので、最新のAndroidマルチデバイス・レスポンシブ対応についてUIデザインの観点からまとめてみます。ちょっと長いんで、目次から気になる部分だけでも読んでってください。Wed, 16 Mar 2022 02:14:08 GMThttps://hira.page/ja/blog/2021-best-buy/https://hira.page/ja/blog/2021-best-buy/2021年に買って良かったものリストです。年が明けてから書いたって別にいいじゃない。ガジェット類、家具類、調理関連など。Thu, 20 Jan 2022 02:57:05 GMThttps://hira.page/ja/blog/material-design-3/https://hira.page/ja/blog/material-design-3/Android 12 のリリースといっしょに、Material Design の公式ドキュメントも大きくアップデートされました（通称M3）。ひととおり目を通したので要所を簡単にまとめて紹介します。ある程度従来のMaterial Designを知っている前提です。Thu, 18 Nov 2021 06:31:14 GMThttps://hira.page/ja/blog/alfred-technique/https://hira.page/ja/blog/alfred-technique/Macで定番の作業効率化アプリ、「Alfred」のおすすめの使用方法や設定をまとめます。大人気アプリなので、似たような記事はよくありますが、できるだけ知られて無さそうなTipsや裏技を紹介していきます。有料版（Powerpack）を前提にしています。すべての機能を書くと長くなるので、自分が毎日レベルで実際に使っているものだけ紹介していきます。Tue, 20 Apr 2021 08:31:43 GMThttps://hira.page/ja/blog/how-to-figma-for-engineer/https://hira.page/ja/blog/how-to-figma-for-engineer/Figmaでデザインをつくる人ではなく、デザイナーが作ったデザインをチェックする人のための使い方説明です。Tue, 23 Mar 2021 09:55:26 GMThttps://hira.page/ja/blog/password-management/https://hira.page/ja/blog/password-management/安全のために、パスワードはかんたんに推測できない複雑なものを、アプリ・サービスごとに使い分ける必要があります。強力で安全なパスワードをサービスごとに使い分けて、なおかつ簡単で楽に覚えられる方法を紹介します。Wed, 10 Mar 2021 07:55:13 GMThttps://hira.page/ja/blog/hugo-vue3/https://hira.page/ja/blog/hugo-vue3/先日、個人のブログサイトをリニューアルしました。その際にブログを作る上でのCMS選定をかなり色々悩んだのと、Vue3を使ってみての知見をまとめます。一応、フロントエンドエンジニア向けの内容です。Mon, 08 Mar 2021 07:55:13 GMThttps://hira.page/ja/blog/tabulasa/https://hira.page/ja/blog/tabulasa/VS CODE と Chrome と Vue が好きなので、自然とできたやつを紹介させてください。Sat, 04 Apr 2020 08:04:35 GMThttps://hira.page/ja/blog/my-desk/https://hira.page/ja/blog/my-desk/一部界隈では、机の上をすっきりさせることが流行っているようで、便乗してこだわりをガッと書きます。U-NEXTはデスクにこだわりがある人が多いらしく、デスク系noteを書くのは僕で5人目です。Fri, 06 Mar 2020 08:18:50 GMThttps://hira.page/ja/blog/platform-guideline/https://hira.page/ja/blog/platform-guideline/本記事はUIデザイナーがプラットフォーム原則を理解し学習する必要性と意義についてまとめたものです。初学者には勉強の仕方・勉強する意義自体がわかりにくい領域だと思うので、その助けになれば幸いです。Sun, 15 Sep 2019 08:17:10 GMThttps://hira.page/ja/blog/prefers-color-scheme/https://hira.page/ja/blog/prefers-color-scheme/prefers-color-scheme という設定値を使うことで、Webページをかんたんにダークモード対応させることが可能です。Chromeでも本日公開された76から対応されたので、かんたんに紹介します。Wed, 31 Jul 2019 08:15:11 GMThttps://hira.page/ja/blog/backdrop-filter/https://hira.page/ja/blog/backdrop-filter/これまでWebデザインにおいては実装が難しかった背景ぼかしの表現が、backdrop-filterというCSSで超かんたんに表現できるようになりました。Wed, 31 Jul 2019 08:13:31 GMThttps://hira.page/ja/blog/sf-symbols/https://hira.page/ja/blog/sf-symbols/SF Symbols をデザインファイル上で使うのに少しつまずいたので、使い方を共有しておきます。Wed, 05 Jun 2019 08:09:27 GMThttps://hira.page/ja/blog/201905_pixel3-camera/https://hira.page/ja/blog/201905_pixel3-camera/Pixel3は発売当初からカメラの良さについて非常に話題になっており、ついてさまざまなところで紹介されていました。カメラ性能ももちろんなのですが、Pixel3が本当に優れている点はその「撮影の体験」の良さだと思っています。良い機会なので、常々感じていたPixelの良さを紹介させてください。Tue, 07 May 2019 23:45:17 GMThttps://hira.page/ja/blog/201904_ui-tools-compare/https://hira.page/ja/blog/201904_ui-tools-compare/Sun, 21 Apr 2019 23:45:17 GMThttps://hira.page/ja/blog/201901_cashless/https://hira.page/ja/blog/201901_cashless/先日Pixel3というスマホを購入して以来、財布を持ち歩くのをやめました。持ち歩いているのはPixel3とカードケースのみで、主に支払いアプリのGoogle Payとクレカだけで支払いを行います。Thu, 10 Jan 2019 01:42:17 GMThttps://hira.page/ja/blog/201812_goodbuy/https://hira.page/ja/blog/201812_goodbuy/2018年に購入・契約してよかったものをまとめました。今年はQOLアゲアゲが目標だったので、いろいろ買ってます。ガジェット、サブスクリプションサービス、猫、その他のカテゴリにまとめます。カテゴリごとになんとなく買ってよかった順に書いてます。Wed, 05 Dec 2018 14:46:13 GMThttps://hira.page/ja/blog/201809_chrome-stylize/https://hira.page/ja/blog/201809_chrome-stylize/最低限HTMLとCSSの基礎知識だけあればOKです。Google検索やGitHubなどを黒い背景に変えたり、いらない要素を消したりできます。ローカルで拡張機能を作る方法なので、「安心」「JSも使える」「SCSSも使える」などメリットたくさん。Sun, 02 Sep 2018 14:46:13 GMThttps://hira.page/ja/blog/201807_vs-code-introduction/https://hira.page/ja/blog/201807_vs-code-introduction/世の中にエディタは数あれど、機能不足・速度不足・学習コスト・値段などネックとなる要素はたくさんあります。その中でも、弱点が少なく、普段使いでちょうどよく快適に使えるエディタ、「VS CODE」を紹介します。主にAtomやSublime、BracketsやCodaなどを使っているユーザに向けた布教記事です。Sun, 15 Jul 2018 14:46:13 GMThttps://hira.page/ja/blog/201803_invision-studio/https://hira.page/ja/blog/201803_invision-studio/去年からプロモ動画のみを公開し、大きな反響を呼んでいた inVision Studio. SketchやXDの対抗となるアプリですが、動画を見る限りそれらを駆逐するほどの高い機能を持っていると噂されていました。ついに登録していた early access版の招待メールが来たので、調査します。Thu, 22 Mar 2018 14:46:13 GMThttps://hira.page/ja/blog/201712_taskrunner/https://hira.page/ja/blog/201712_taskrunner/フロントエンドの開発はたくさんのライブラリやフレームワークに依存し、それらを管理するためのタスクランナーも様々に群雄割拠しています。本記事はそれらの特徴とコンセプトについて触れ、違いをイメージしやすくすることです。Tue, 12 Dec 2017 12:57:25 GMThttps://hira.page/ja/blog/201712_python-server/https://hira.page/ja/blog/201712_python-server/Macなら特別な準備なしに、簡単にすぐローカルサーバをたてて手元のスマホから、作成中のWebページ・アプリを確認できます。Sun, 03 Dec 2017 04:05:42 GMThttps://hira.page/ja/blog/201710_signifier/https://hira.page/ja/blog/201710_signifier/アフォーダンスとシグニファイアという言葉を聞いたことがあるでしょうか。アフォーダンスしか聞いたこと無いという方、要注意です。Sun, 22 Oct 2017 06:17:51 GMThttps://hira.page/ja/blog/201710_lets-bookmarklet/https://hira.page/ja/blog/201710_lets-bookmarklet/ブックマークレットとはブラウザに登録しておき、任意のWebページ上で実行できるプログラムです。JSがすこしわかれば作成はとても簡単で、特別な環境作成も必要ありません。Sun, 01 Oct 2017 14:46:13 GMT