The Obvious UI is Often the Best UI
Illustration by Thanh Tran, UX DesignerVoltaire said, “le sens commun est fort rare”—common sense is very rare. Perhaps to realize that a certain decision is common sense, one has to have enough life experience to know the right path to take , at which point certain choices become common sense and don’t require much analysis. When we talk about common sense with product design, what we now see as
Google Apps Script は何が強くてどんなときに使うべきかプラクティスをまとめてみた
はじめにGoogle Apps Script は無料で色んなことが実現できるため、ついつい「全て GAS でやっちゃおう」みたいな話になりがちです。Google Apps Script も万能ではないので、強み・弱みを理解した上で他の選択肢と比較して使うのをお勧めします。 Google Apps Script のプロジェクトを 2–30 個作ってきた中で、自分なりのプラクティスをまとめてみます。 この内容は Cloud Next ’18 in Tokyo で登壇したときの内容を含んでいます。この登壇から半年以上経ったのでアップデート部分も以下にまとめています。 Google Apps Script の強み・弱みまず、強みと弱みについてまとめてみます。 強み 1. Google Apps の API を簡単に呼び出すことができる一番の強みはこれだと思います。Google Apps Scrip
チャットボットの作り方 Google Dialogflow入門
チャットボットを利用したサービスは昨今激増し、様々なシーンでチャットボットを目にしたり利用する機会が増えてきたかと思います。特に2016年、FaceBookとLINEがチャットボットの開発環境をオープンさせたのを皮切りに多くの企業がチャットボット市場に参入しました。 また、チャットボットを簡単に作成することができるツールも豊富に存在します。そこで、本記事では独自のチャットボットを作る為に必要な作成サービスやその設定方法を中心に紹介していきたいと思います。 今回はGoogle Dialogflowの機能や扱い方を紹介していきたいと思います。 DialogflowとはDialogflowは自然言語の解析を担うことができるプラットフォームサービスの一つです。自然言語の解析とはプログラミング言語のような厳格なルールに基づく言語とは対照的に我々が普段コミュニケーションの中で利用している言語（日本語、
チャットボットの作り方 Google Dialogflow と LINE公式アカウント連携
チャットボットを利用したサービスは昨今激増し、様々なシーンでチャットボットを目にしたり利用する機会が増えてきたかと思います。特に2016年、FaceBookとLINEがチャットボットの開発環境をオープンさせたのを皮切りに多くの企業がチャットボット市場に参入しました。 また、チャットボットを簡単に作成することができるツールも豊富に存在します。そこで、本記事では独自のチャットボットを作る為に必要なサービスの紹介やその設定方法を中心に紹介していきたいと思います。 今回はGoogleのDialogflow(チャットボットサービス)をLINE公式アカウント※1 と紐ずける方法について書いていきます。 LINE公式アカウントの登録まずは以下のリンク先でLINE公式アカウントの作成を行いましょう。テスト的に利用する場合であれば未認証アカウントを開設するを選択し、アカウントを開設しましょう。 【LINE公
デザイナー向けマーケティングの入門書
デザイナー向けマーケティングの入門書ビジネスに必要な知識として「マーケティング」があります。デザイナーが学ぶために、初学者向け入門書を選んでみました。マーケティングだけでビジネスがすべてわかるわけではありませんが、市場や価値創造について知ることでデザインの持つ意味や価値を再認識することができるでしょう。 基本的な概念や用語を知っておくことで、マーケティングの意図や戦略を把握してそれらをデザインに反映することができます。また、マーケティングの言葉でデザインの意味や価値を説明できれば、経営者に提案が届きやすくなると思います。 後半にはブランド戦略の本もあげてみました。紹介しているのはどれも入門書です。マーケティングの分野はかなり広くいので、より深く知りたい場合は入門書に書かれている参考文献リストなどをみてそれぞれの専門分野に進むと良いと思います。 （注）私はマーケティングやブランディングの実務
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
1ヶ月続けた“勝手にUI改善”の振り返り
他にもairbnbのトレースやTwitterのトレース等も行いました。 ある程度UIを設計する際のルールを掴んではきましたが、自分で能動的に考えて手を動かした訳ではないため物足りなさを感じていました。(トレースからの学びはたくさんあったので、独学から始める方は最初にトレースから始めることをオススメします) その時、カイさんから何かアプリを作ってみるか既存アプリのリデザインをやってみると良いよと言われました。 1からアプリを考えるのも良かったのですが、既存アプリのリデザインの方が手軽に始めることができそうだと思ったので、“勝手にUI改善”を始めることにしました。これが私が“勝手にUI改善”を始めた背景です。 ちなみにアプリのリデザインを継続させるモチベーションとして自分の思考過程をTweetすることにしました。 たまにいいねとかリプライくるので、嬉しくて毎日続けたくなりますw 継続できないよ
非デザイナーがナメられないための、おすすめデザインツール12選
僕は非デザイナーですが、こちらの考えにとっても共感します。 ブログにしても、アプリにしても、イベントにしても、良いコンテンツは世の中にもういっぱい溢れていて。 本気度を示し、他ではなく私たちのコンテンツを選んでもらうために、デザインにこだわるって大事だなって考えています。 おしゃれなものを作らなければいけない、と言うわけではないと思います。 使ってもらいたい・届けたい人たちに寄り添い、作りたい世界観を伝えるためのデザインにすること。 相手視点を持った思考が大事なんじゃないかなって思います。 『わかる！だけど実際難しいんだよ！』 という非デザイナーの方々に向けて、同じく非デザイナーの僕がお気に入り登録して愛用しているツールをシェアします。 有名どころも多いですが、もしご存知ないものもあったら触ってみてください。
デザインを批評するということ
この記事は2016年6月くらいに書籍「みんなではじめるデザイン批評」を読み、勤務している会社の社内メンバー共有用ブログ的なものに綴った私のポエム書評に加筆修正を加え、いつでもどの組織にいっても利用できるように改めてインターネット上に乗っけさせていただいたものです。 書籍：みんなではじめるデザイン批評（超オススメ！）デザインを評価することは難しい。 なにが難しいって判断基準を明確にするのが難しい。 でも、意思決定する根拠となる判断基準を明確にしないと、いつまでも難しいままである。さらにはレビューする行為自体、面倒だと煙たがられかねない。デザインとは問題解決なのに、問題になるという本末転倒。 デザインとはなにか。それを評価することとはなんなのか。 「レビュー」と「批評」の違いは一体…！？ そんな悩みを抱える私が書籍「みんなではじめるデザイン批評」を手にとり、読み進めながら、この目の眩むほど崇高
local(‘😀’) の持つ意味 - ONO TAKEHIKO - Medium
かつて Web フォントを使用する上でブラウザのレンダリング エンジンがまだ成熟しきっていなかった頃。それはバグとの戦いの歴史でもありました。 Web フォントが登場し世の中の Web デザイナー・デベロッパー陣営は、画像化テキスト（<img>）や背景画像置換テキスト（negative text-indent & background-image）という実装・運用コストを増大させる人類共通の敵から、我々の時間と金を取り戻すであろうそれに、まさに究極兵器になり得ると期待を寄せたものです。 しかし。まだ早すぎた。 ……!! 腐ってやがる期待が高いあまり実装を急いだ各種ブラウザーがレンダリング エンジンの成熟を待たずにリリースしたため、Web フォントは方々でバグを引き起こす結果となり別の戦いを強いられることにもなりました。 それらは Safari と IE 6〜8 で Web フォントの fo
いまいちど日本語の標準的なサンセリフ系 Web タイポグラフィを考える - ONO TAKEHIKO - Medium
Web フォントが浸透してきて、Web デザインのタイポグラフィーにおける自由度は飛躍的に向上してきた感があります。いやほんとに。 ひとむかし前なんてデザイン上どうしても指定したいフォントがあった場合には、 Photoshop や Fireworks でテキスト部分にスライスを切って画像として書き出したりしてましたからね。しかもデバイスの画面が高解像度化するのに伴ってやれ 2倍・3倍・4倍... って用意しなければならない弾数も増えるにつれて、もう作るのもその後の修正などの運用作業も血みどろな状態だったと思います。それでもやりましたけど。 その点いいですよね Web フォントは。細かなカーニングや欧文と日本語テキストとの大きさのバランスなど、微調整の面でまだ CSS の実装が追いついていない部分はあるので完璧じゃあない。けれど実装や運用のコストを考えたら時間的にも費用的にもメリットが多いの
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
Wireframing Kit for Adobe XD
Wireframes and Mockups created for Baxi’s mobile application using Adobe XD — Booking Screen & Ride Screen (left to right) Wireframing is an important skill in the software industry, used to organise information on an interface and communicate it with the team. Balsamiq, UXPin, Omnigraffle, Axure etc. are few of the already established wireframing apps. So, why did I put effort creating this wiref
[Adobe XD] Illustrator使いさんに捧げる SVG書き出しのコツ
こちらは、Adobe XD Advent Calendar 2016の4日目の記事ですAdobe Experience Design(以下 Adobe XD)で書き出したSVGをIllustratorに読み込んだとき、次のような体験をしたことはありませんか？ 何もなかった！→Illustrator CC 2017で修正されています表示されないモノがあるんだけど？全てを解決する手段はないのですが、今回はなにが起こっているか・どういう対処ができるのかをまとめます。 最初に、Illustrator SVG読み込み問題について確認しましょう。 リピートグリッドのエリアでマスクがかかってしまうオブジェクトが書き出されてないとかそういうものでなく、リピートグリッドのエリアに合わせて作られるクリッピングマスクで隠されているだけなのですが、場合によっては気が付かないですよね？ ずっとIllustrator
![[Adobe XD] Illustrator使いさんに捧げる SVG書き出しのコツ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e8b567c6dc3a0ec48179135666ebd9899d511c25/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AjgB0dc3l1ie4jk8DhMRoyQ.png)
How Designers Should Think About SVG
While preparing my new course on SVG workflows in Sketch, I’ve spoken with a bunch of designers, both junior and senior, about their use of the format. And I’ve noticed a common misunderstanding about SVG: We often expect SVG to behave like a bitmap graphic—like a PNG with infinite resolution. But it really isn’t. For one, certain things are more difficult with SVG. Exporting—or, more specifically
Hamburger menu alternatives for mobile navigation
If you’re working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.) Luckily, more and more sites and apps are experimenting with alternative, more efficient solutions for th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tutorial: How to Create an Animated GIF Using Icons
How to design an accessible color scheme
Check out these cool WP Themes to create websites with
Nyle Engineering Blog