SATOSHI MURATA

プロダクトをデザインするときに意識したい前後のユーザー体験

デジタルプロダクトの施策はたいていの場合、〇〇機能というかたちで企画されることが多いと思います。プロダクトデザイナーがその機能をデザインするなら、単に使えるものにするだけでなく、その前後の体験までを含めた視野の広いデザインをしたいものです。独立した機能としてデザインしてしまうと、プロダクト全体からみたときにその機能が孤立しまって使いにくいという状況を生んでしまうことがあります。最悪の場合、せっかく作ったのにその機能に気づいてもらえないということが起こってしまったりします。なので、ユーザーが目的を達成するために必要なタスクを理解し、鳥の目でシステムとユーザーの行動がなめらかにつながるよう、プロダクトの体験を設計する必要があります。

デザイン

#UIデザイン
#ユーザー体験
#プロダクト

2021年7月3日に公開

Micromodal.jsで開閉時のアニメーションをつける方法

Micromodal.js はWAI-ARIAのガイドラインに準拠した、軽量でアクセシブルなモーダルライブラリです。このmicromodalを使ってモーダルUIを実現するときに、どうやって開閉時のアニメーションをつけるのでしょうか。

開発

#JavaScript
#JavaScriptライブラリ
#UI

2021年6月17日に公開

CSSのスクロールスナップを利用して横スクロールする一覧リストをつくる方法

昨今のWebやアプリのUIでよく見る、横スクロールする一覧リストのつくり方です。scroll-snapを利用してCSSのみで実現できます。

開発

#CSS

2021年6月9日に公開

Docker+WP-CLIでWordPressの開発環境構築をラクにする

Dockerで動かしているWordPressの開発環境にWP-CLIによる設定の自動化を追加して、管理画面からポチポチ初期設定をする手間をなくしましょう。

開発

#WordPress
#Docker

2021年5月22日に公開

必要な情報を必要なときに提供すると体験が良くなる

タイトルの内容について。人と人とが会話する時には当たり前ですが、これと同じような体験をWebサイトで提供するのは簡単ではありません。Webサイトには様々な目的を持った人が訪れて、それぞれの人が求めている情報はそれぞれ違うからです。それをひとつのWebサイトでかなえようとしているのだから無理もありません。Webサイトをつくる側は、どのような人が訪れるのか、そしてどんな情報を必要としているのかを理解してから制作に取りかかるのが普通なので、情報の不足という点で困ることは基本的にないと思います。ただ、様々なユーザーを想定すればするほど、Webサイトに掲載したい情報は増えていくのが常でしょう。訪れた人がそのとき必要としない情報も掲載することになるので、人によっては、大量の情報に圧倒されて、自分がほしい情報がどこにあるのか分からないという状況に陥ってしまうことがありえます。なので、情報を適切にまとめてWebサイトの構造やナビゲーションなどを工夫して、わかりやすく情報を整理できるスキルがWebサイト制作者には求められています。

デザイン

#インタラクション
#情報デザイン
#ユーザー体験

2021年5月15日に公開

WordPressの投稿（投稿タイプpost）の一覧を任意のURLに変更し、投稿パーマリンクを下層ページに位置付ける方法

WordPressの標準的な投稿（投稿タイプ post）の記事一覧ページ（アーカイブページ）をトップページとは別に用意したいことはありませんか？　この記事ではその設定方法を解説していきます。カスタム投稿タイプの一覧ページを作るときとはすこし違う設定が必要です。

開発

#WordPress

2021年5月4日に公開

CSS ModulesでCSSを書く時に実務で必要になる書き方まとめ

このサイトのCSSはこれまでstyled-jsxだったのですが、Gatsbyを2から3にアップグレードしたのを機に、CSS Modulesに置き換えました。置き換える過程で、実務で必要になりような要件をどのようにクリアしていくのか体感できたので、まとめてみます。以下、GatsbyでSCSSを利用したCSS Modulesのサンプルになります。

開発

#CSS
#React
#Gatsby

2021年4月27日に公開

WordPressのget_template_part()に$argsで引数を渡す

WordPress 5.5.0から get_template_part() に $args パラメーターが追加されています。get_template_part( string $slug, string $name = null, array $args = atarray() )get_template_part() | Function | WordPress Developer Resources

開発

#WordPress
#PHP

2021年3月20日に公開

デザインレビューをするときによく確認しているポイント

複数人でひとつのプロダクトをデザインしているなら、お互いにデザインの成果物をレビューしあうことが日常だと思います。僕がレビューする側になったときに、よく確認しているポイントを挙げてみました。この記事のプロダクトという言葉は、Webサービスやアプリといった使用をともなうデジタル製品を指しています。

デザイン

#コミュニケーション
#ソフトスキル

2021年3月6日に公開

WordPressの記事編集画面で誤って記事公開してしまうのを防ぐために公開ボタンの色を変える

WordPressでの記事作成、こまめに保存をしながら記事を書くことありますよね。保存しようと思って保存ボタンを押したつもりが実は公開ボタンだった。なんてことがたまにあります。なぜ公開ボタンを押してしまうのか。これは記事ステータス変更のエリア一帯で、公開ボタンが目立つように色がついているからだと思います。ぼんやりしているといちばん最初に目に入ってきたボタンを押してしまいます。ということで、この認知的なミスが起こりにくくなるように、公開ボタンの色を変えてしまいましょう。

開発

#WordPress
#WordPress管理画面

2021年2月27日に公開

CSS：tableのセル内文字が長くなったときに省略をする方法

テキストを1行に収めたいとき、収まりきらない文字を三点リーダー（…）で省略することがあると思います。次のようなCSSです。div { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}この例のように div 等の要素だったらこれで良いのですが、テーブルセル内ではもうひとつプロパティを追加する必要があります。

開発

#CSS

2021年2月20日に公開

Dockerで動かしているWordPressのアップロード上限を変更する

WordPressのアップロード上限はデフォルトで2MB。大きめのファイルをアップロードしたいということがたまにあります。そんなときは以下の手順で上限を変えたら、大きめのファイルもアップロードできるようになります。

開発

#WordPress
#Docker

2021年2月6日に公開

Webサイトにアップロードする画像や圧縮率はどのくらいがいいのか

低速回線でWebサイトがなかなか読み込まれなくてイライラすることはありませんか？　ウェブページの読み込みは速ければ速いほど良いです。そして、その速さに大きく影響を与えている要素のひとつが画像です。Webサイトを更新する立場なら、できるだけ画像のファイルサイズは小さく抑えて配信したいもの。アップロードした画像がそのアップロード先のシステムで変換されたり圧縮されたりしない場合は、自分の手で圧縮することになります。そんなとき、画像ファイルのサイズと品質のバランスはどのように調整したらいいのでしょうか？　実装テクニックまで踏み込むと話が大きくなるので、手元で画像を圧縮するときに知っておくと便利な知識に絞ってまとめてみます。

デザイン

#画像

2021年1月30日に公開

Illustratorでアウトライン化せずに文字を上下中央に整列する方法

Adobe Illustratorで文字を上下中央に揃えたいと思ったことはありませんか？　表の中の文字を揃えている時とか、WebのボタンUIを再現したい時とか、けっこう頻繁に中央揃えしたいと思うことがあります。

デザイン

#Illustrator
#デザイン技術

2021年1月23日に公開

完璧に機能することよりも、完璧だと信頼され続けることの方が重要

Web制作に向きあうときの基本的な考えかたとして「変わっていくもの」というキーワードがあります。ウェブはいつでもなんどでも変更できるメディアなので、ある特定の状況下においてのベストなデザインやベストな仕様は存在しますが、これ以上触らなくても良いという完璧な状態はなかなか存在しません。いつか必ずまた手を加えたくなるものです。そうして少しずつ手を加えて、Webサイトを育てていきます。

デザイン

#デザインの考え方

2021年1月15日に公開

iOS Safariのinput要素によく使う3つのCSSプロパティ

普段PCのブラウザで開発をしていているWebサイトをiOSの実機端末で確認してみたら、input要素が思った通りの見た目になっていなかった。そんなことがよくあります。僕がよく遭遇する3つの問題の解決方法をそれぞれ紹介します。

開発

#iOS
#Safari
#CSS

2021年1月13日に公開

Big Surにしたら外部ディスプレイのTrue Toneがスリープ解除時にほぼ毎回オフになるようになったのでAppleScriptで対応した

タイトルの通りですが、macOSを11 Big Surにアップデートしてから、Macのスリープを解除するごとに外部ディスプレイのTrue Toneがほぼ毎回、実質オフになってしまう（機能的にはオンになっている）症状に悩まされています。

仕事

#ディスプレイ
#AppleScript
#デスク周り
#Mac

2021年1月9日に公開

MacのFinderでファイルの拡張子を一括変換する方法

Macで大量の似たようなファイルを扱っていると、拡張子を一括で変換したいと思うことがあります。たとえば、デジタルカメラから取り込んだ写真とか、Adobeのアプリケーションから書き出した画像とかです。

仕事

#Mac
#Finder
#生産性向上

2021年1月6日に公開

デザインは遅効薬なのでプライドを持って取り組めば良い

Webサービスのデザインの改善施策には成果が出やすいもの・出にくいもの、様々あります。もちろん即効薬もあるでしょう。しかしその多くは遅効薬だと考えています。小さな改善を積み重ねていった時に、気付いたら大きな成果になっていた。そんなこともよくあります。短期的な結果に一喜一憂せずにコツコツやるのが一番です。

デザイン

#デザインの考え方

2021年1月3日に公開

gitのremote urlを変更する方法（BitbucketからGitHubへの引っ越しを例に）

GiHubの無料プランでプライベートリポジトリが作成可能になってから、それまでBitbucketに置いてあったリポジトリを、機会があるごとにちまちまとGitHubに引っ越しています。この記事では具体的な引っ越し手順をメモがてら書いてみます。Changing a remote's URLリモート URL をリポジトリに変更する

開発

#git
#GitHub
#Bitbucket

2020年12月31日に公開

throttleとdebounceの違い。覚え方も考えてみた

throttleとdebounceはいずれも繰り返し大量に発生する処理を間引いて、負荷を軽減させるための処理についた名前です。それぞれ間引き方に違いがあります。この2つの違いをよく忘れがちなので、知識をイメージで補強することにしました。

開発

#JavaScript

2020年12月23日に公開

CSSのcurrentColorを使ってもっと簡単に色を指定する

こんなことがしたいことはないでしょうか。SVGの色を文字の色に合わせたい背景色を文字の色に合わせたい愚直にやると、SVGと文字や、背景色と文字に同じ色を指定すると思います。div { color: #ff0000; background: #ff0000;}もしかしたらそれ currentColor を使ったら簡単になるかもしれません。

開発

#CSS
#色
#SVG

2020年12月19日に公開

初めてShopifyテーマ開発をするときに読みたい情報まとめ

ネットショップをつくれるサービスShopifyのテーマ開発を開始するのに必要な情報をまとめてみました。公式ドキュメントが充実していますが、散らばっている印象があるので、このようなまとめが役に立つのではないかと思っています。前提として知ってほしいことは、テンプレート言語はliquid、開発ツールはthemekitを使うということです。

開発

#Shopify
#liquid

2020年12月9日に公開

WordPressのユーザー権限をカスタマイズするときに必要な権限の知識

WordPressは、どのユーザーアカウントにどの権限を与えるかを権限グループという概念で定めています。開発者はこの権限を細かにカスタマイズできます。この記事では権限のカスタマイズで必要な最低限の知識をまとめてお送りします。基礎知識については「ユーザーの種類と権限 / Roles and Capabilities」を参照してください。

開発

#WordPress

2020年12月1日に公開

RSSリーダーのアイテムに記事サムネイルを表示する方法

僕が見たのはFeedlyとInoreaderだけで他のRSSリーダーのことはわかりませんが、enclosure にサムネイルとして表示したい画像を指定してあげたら表示されました。過去のアイテムには反映されないようなので、指定後のRSSリーダーによるフェッチから反映、と考えておくと良さそうです。

開発

#RSS
#JavaScript
#Gatsby

2020年11月25日に公開

gatsby-plugin-feedを使ってGatsbyサイトにRSSを追加する

GatsbyのサイトにRSSを追加するには gatsby-plugin-feed というオフィシャルプラグインを入れればよいです。公式ドキュメントもあります。このサイトでもgatsby-plugin-feedを使ってRSSを作っていますが、いくつかポイントがあったので書き残しておきたいと思います。

開発

#Gatsby
#RSS
#Contentful

2020年11月15日に公開

2020年 Markdownエディタ検討 | 僕がiA Writerに決めた理由と検討の様子

これまでの僕のブログ執筆は、ブログ投稿画面のテキストエリアか、個人用Scrapboxのどちらかで行っていました。それらで特別困ってはいなかったのですが、世の中には文章を書くことに特化したアプリもあるし、使ってみてもいいのでは？と思って、数あるエディタアプリの中から1つ選ばせてもらいました。それが今この記事を書くのにも使っているiA Writerです。選択の経緯を振り返りながら、僕がiA Writerのここがいいなと思った点を書いてみます。

仕事

#Mac
#アプリ
#Markdown
#エディタ

2020年10月7日に公開

レスポンシブデザインで文章の改行位置をある程度狙ってデザインするための方法

レスポンシブデザインを採用したWebサイトでは、文章の改行位置をあらゆる画面幅で完璧にコントロールするのは至難の技です。とはいっても見出しやキャッチコピーなど印象的に見せたい箇所の文章は、その意味にあわせてなるべく綺麗に改行してあげたいもの。ある程度狙った位置での改行を実現する方法です。

開発

#CSS
#HTML

2020年9月9日に公開

デザイン作業用レイヤーで効率化。デザイナーのための ErgoDox EZ キーマップ

身体を縮こめて手首が窮屈な状態で一日に何時間もタイピングしていることに違和感を感じてErgoDox EZを買ったのが2019年の8月のこと。縮こまらずにタイプできることに加えて期待していたことがもうひとつありました。それはキーマップをファームウェアで変えられるという点です。なんどもキーマップのチューニングをしてきましたが、購入から10ヶ月が経ち、だいぶそれも落ち着いてきたように思います。

仕事

#ErgodoxEZ
#キーボード
#Illustrator
#Photoshop
#デスク周り

2020年6月13日に公開

どのような内容の画像が入るかわからない場合でもきれいな見た目の枠線をつけたい時に使えるCSS

画像の内容によって枠線をつけたほうがきれいに見える場合と見えない場合があります。画像一枚一枚にたいしてつけるかつけないかを決められるなら困らないのですが、UGCサイトやブログテーマのようにどんな画像が表示されるのかわからないケースでは、そのような丁寧な判断をしたくてもできないのが現実でしょう。そんなときに重宝する枠線がPretty Borderです。

開発

#CSS
#画像

2019年8月12日に公開

ユーザーインタビューをより良く行なうための知見

これまで、担当しているプロダクトのユーザーを知るために「ユーザーインタビュー」をチームで何度も実施してきました。ユーザーに実際に会って、プロダクトをどう使っているのか、何を考えているのかを直接聞ける機会は貴重で、画面越しでは得られない情報が得られるので気に入っています。いくつか実施に際しての知見を書いてみたいと思います。

デザイン

#ソフトスキル
#ユーザー調査

2019年7月19日に公開

UIデザインのガイドラインとの付き合い方

UIデザインの仕事をしていると、iOSやAndroidといったプラットフォームが公開しているデザインのガイドラインとどのくらい折り合いをつけていくかということがしばしば議論の的になります。私がアプリをデザインする場合は、ウェブのデザインをするときよりもそれを多く尊重しますが、ウェブの場合は独自のガイドラインを重視しています。

デザイン

#ガイドライン
#UIデザイン

2019年5月13日に公開

じゃじゃーんをやめる。デザイン案はできるだけ早い段階でオープンにするのがおすすめ

日頃デザイン案をどの段階で他者に見せていますか。わたしは最近、途中でもできるだけ早い段階でチームメンバーにデザイン案をオープンにしていくということを試してみています。具体的には、Adobe XDでウェブデザインのモックアップを作成しているのですが、プレビューのシェアURLをグループウェアやGitHubのIssueに貼っておくというものです。翌日には新しいボタンが増えているかもしれないし、一週間後にはガラッと印象が変わってるかもしれない、という断りも添えて。

デザイン

#コミュニケーション
#ソフトスキル

2019年4月4日に公開

アニメーションGIFのつくりかた

いろいろやってみた結果、個人的にいちばん満足できると思った、アニメーションGIF作成フローです。After Effectsでアニメーションをつくっている前提です。

デザイン

#Photoshop
#After Effects
#画像
#デザイン技術

2017年11月3日に公開