デザイン

デザインに関する考えやヒント。Webデザインの技術スキルもこのカテゴリー。

『プロダクトのデザインを長く健康に保つには?――デザインの優先順位・チームでのコミュニケーションのコツ』を寄稿

翔泳社さんのプロダクト開発にフォーカスしたメディアProductZineに寄稿させていただきました。株式会社はてなのリレー連載『はてなのプロダクト開発の舞台裏』の第4回、デザイナー編です。 codezine.jp この記事では、現実的に何をつくるかをスムーズに合意…

文章の改行位置をいいかんじにするCSS

レスポンシブな画面の作りかたをしていると、幅がせばまったときに改行されてほしくないところで改行されてしまうことがよくある。 蒼く透き通った空と瀬戸内の柔ら // ここで要素の幅いっぱいになる かな波の音 とくにキャッチコピーやリード文など印象的に…

『魔法のiらんどリニューアルにおけるデザインの考えとその実践』を執筆

Hatena Design Group に『魔法のiらんどリニューアルにおけるデザインの考えとその実践』を書きました。 design.hatenastaff.com 魔法のiらんどのリニューアルプロジェクトで、デザイナーはどのようなことを考えてデザインの方向性を定めたのか、その思考の…

『見た目のデザインから意味のデザインへ――はてなのデザイナーがプロダクトの価値を高めるためにやっていること』を寄稿

翔泳社さんの新メディアProductZineに寄稿させていただきました。株式会社はてなのリレー連載『はてなのプロダクト開発の舞台裏』の第3回、デザイナー編です。 codezine.jp この記事では、はてなのプロダクト開発の現場で、ユーザーに喜んでもらえる価値づく…

画像をきれいな罫線で囲う

だれもが画像を罫線で囲うデザインを考えたことがありますよね。 きっとそのモチベーションの裏には、単にアクセントとしてつけたいとか、ページ全体の統一感を出したいといった、グラフィック的な側面のもの。もしくは画像がほかの情報よりも重要なことを示…

ユーザーインタビューの知見

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

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

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

じゃじゃーんをやめる

日頃デザイン案をどの段階で他者に見せていますか。わたしは最近、途中でもできるだけ早い段階でチームメンバーにデザイン案をオープンにしていくということを試してみています。 具体的には、Adobe XDでウェブデザインのモックアップを作成しているのですが…

『カクヨムViewerのデザインを紹介します』を執筆

Hatena Design Group に『カクヨムViewerのデザインを紹介します』を書きました。 約2年半ぶりのメジャーバージョンアップを遂げたカクヨムViewerのデザインのポイントと、そのために用意したクリエイティブについて紹介しています。全体を概観するような内…

『デザイナーがReact Nativeでのアプリ開発を経験した感想』を執筆

Hatena Design Group に『デザイナーがReact Nativeでのアプリ開発を経験した感想』を書きました。 カクヨムのアプリの一部をReact Nativeを使ってリニューアルしています。デザイナーもコードに触れ、手を動かしながらデザインに参画したので所感を書き連ね…

『縦組みのデザイン』を執筆

Hatena Design Group に『縦組みのデザイン』を書いています。 ウェブブラウザの縦組みの実装が、ある程度実用に耐えうるようになってきました。カクヨムでベータリリースした縦組み機能とそのデザインを紹介します。 どうぞご覧ください。 design.hatenasta…

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

いろいろやってみた結果、2017年現時点でのおすすめ設定です。 After Effectsのレンダ―で最高画質でレンダリング Photoshopの読み込み→ビデオフレームからレイヤー… Web用に保存(従来) Adobeのチュートリアルに沿って作成 https://helpx.adobe.com/jp/phot…

『使いやすさをデザインする上で心掛けていること』を執筆

Mackerelのブログで『使いやすさをデザインする上で心掛けていること』を書きました。 必要な情報を分かりやすく伝え、迷わないデザインを施すにはどういった配慮が必要なのか。Mackerelの事例を交えながら、製品の振る舞いのデザインについて紹介しています…