レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい

多くのSaaS企業にとって、「料金」周りは悩みの種。 ただ料金設定を変えるのは難しくても、「料金ページ」自体を変えることで、CVRを上げたり、より高いプランへ誘導したりすることはできる。 今回は、SalesforceやLinkedInなどを筆頭に、SaaS 250社の料金ページを分析した記事をベースに、SaaS企業が知っておくべき「料金ページ」の7つの事実をざっくりと解説する。 Domoの料金ページよりSalesforceやHubSpot、Zendeskなど、実際の価格を載せているSaaS企業の料金ページをご覧になったことがある方も多いと思う。しかし驚くべきことに、SaaS 250社の内、80%は具体的な料金を公表していない。 (上の画像はDomoの料金ページの例) これは、なぜだろう？ EcoSignのCEO Jason Lemkin氏によると、「SaaS企業が具体的な料金を公開しない」

常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

Webアプリケーションの、主にフロントエンド周りに関連する歴史をまとめた。 静的サイト まずは原初の話から。 1990年代前半、まだWebアプリケーションという言葉が無かった時代。 静的にHTMLファイルを配信するだけのWebサイト(静的サイト)だけがあった。 静的サイトでは、HTTPサーバーに複数のHTMLファイルを置いておいて、クライアントのHTTPリクエストのURLのパスによって配信するHTMLファイルを変える。 例えば、HTTPサーバーをhttpdで立てて、ドキュメントルートを/var/www/htmlに設定して、以下のようにファイルを配置したとする。 この場合、ブラウザでhttp://<HTTPサーバアドレス>/index.htmlにアクセスすれば/var/www/html/index.htmlが配信されてレンダリングされて表示される。 http://<HTTPサーバアドレス>/

ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール

こんにちは。現在カクヨムのデザインを担当しておりますデザイナーの id:murata_s です。 先日、カクヨムでは縦組み機能をベータリリースしました。これは文字通りウェブブラウザ上で小説を縦組みで表示することができる機能です。リリース後書き手ユーザーの皆さまを中心に多くの反響がありました。 この機能開発では、基本的な組方向に関する変更に加え、画面のデザイン的にも新しい試みを行っています。そこで、今回はウェブにおける縦組みのデザイン事例としてこれを紹介します。 小説を縦組みで読みたい ウェブ小説を縦組みで読みたいという、シンプルなモチベーションで始まった縦組み機能の開発ですが、アイデア自体はサービスの立ち上げ当初からチーム内で挙がっていました。日本語で紡がれた物語を縦組みで読みたいという欲求は、小説文化に親しみのある者なら誰もが思うことだと思います。実際にご利用いただいているユーザーさんと

敬愛する二宮和也と、勝手にライバル視している中島健人が共演する嵐のワクワク学校、サッカー並みに熱いな。ふうとです。 今回のUI修行は特別編。株式会社rootさんをお招きして、総勢11名で開催です。話題の「NHK 2018 FIFA ワールドカップ」のアプリについて見ていきますよー！ 特別編ということで少しだけ時間も拡大し、こんな感じでやりました。 ・使ってみて最低1ヶ所以上、デザイン的観点で考察したことを記述する【15分】 （新鮮だった箇所、疑問に思った箇所、改善できそうな箇所etc） ・改善版UIをつくる（最低1画面でOK）【25分】 ----- もくもく終了 ----- ・シェアとフィードバック【45分】 ・今日の気づき【5分】もくもく時間がいつもより増えているのと、単純に参加人数が多いので、個々の気づきと改善案を共有だけで時間ギリギリ。 さて、早速。 UIの気づき各画面ごとに、具体的

「わかりやすさ」と「新鮮さ」の両立を目指して ※ 2018年4月に開催された「UI Crunch #13 娯楽のUI - by Nintendo -」のレポート記事としてお届けします。 「スーパーマリオ」「ゼルダの伝説」「どうぶつの森」など、これまでに数々の大ヒットシリーズを世に送り出してきた任天堂。 そんな任天堂が、新規タイトルとして企画し、開発したのが「スプラトゥーン」だ。 スプラトゥーンはインクを撃ち合うアクションシューティングゲーム。2015年5月にWii U専用のゲームソフトとして発売された。 いわずもがなの大ヒットタイトルとなったが、その大きな特徴は作り込まれた世界観。UIデザインを担当した、橘 磨理子さんは「わかりやすさ」と「新鮮さ」の両立を意識したという。 「UIは“わかりやすさ”が何よりも大事で、目立ってはいけないものだと思っていたのですが、アートディレクターからは“新鮮

2018-02-27Composable な UI 設計を目指したフロントエンド開発こんにちは、開発本部の舘野です。医療介護の求人サイト「ジョブメドレー」の開発を担当しています。 昨年、ジョブメドレーでは事業所が利用する採用管理画面の UI リニューアルを行いました。ユーザが使いやすい UI づくりを目指すために、長期間にわたり誰が開発しても一貫性ある UI を実現できるようなシステムが必要です。そこで今回は「Composable」な UI システムの実現をテーマに、どのように開発を行ったのかについて、共有させていただきます。 背景：画面や機能追加のたびに UI の一貫性がなくなっていたジョブメドレーの採用管理画面とは、医療機関や介護施設の採用担当者が求人情報の管理や応募者の選考状況の管理などを行う画面です。 この採用管理画面ですが、リニューアル以前はAngularをフレームワークとして採

We Are JavaScripters! @16th【初心者歓迎LT大会】の資料です。 https://wajs.connpass.com/event/78939/

社内イベントで登壇した際のスライドです。｢ユーザーインターフェイス解剖学｣の改訂版。主に、UIデザインにおいて検討した方がよい／すべき考え方というものを簡単にご紹介しました。

電子カルテが登場してから随分たつが、残念ながらいまだに素晴らしいものにお目にかかったことはない。特に、日本のメーカーが開発したものは使いやすさまで考慮されているとは言いがたく、UI／UXにも改善の余地がかなりあるように思う。 一般的にPC上でセキュリティのかかったものにログインするためには、利用者IDとパスワードを入力後にエンターすれば開く。電子カルテも同様で、多くのメーカーの場合、利用者IDとパスワードを入力してエンターすればログインできる。 これはＦ社の電子カルテであるが、利用者IDとパスワードを入力後にエンターするだけではカルテの画面にはならず、利用者氏名が表示されるのを待って、さらに「診療業務開始」をクリック（もしくは再度エンター）しなければならない。 診療業務（電子カルテ）以外の業務も選択できるようにするために、このようにしていると思われるが、多くのユーザーは１回のエンターでログ

はじめに若手のUIデザイナーから「使いやすいアプリをデザインするために認知心理学を勉強したい。どんな本を読んだらいいですか？」と相談を受けたので、いくつか紹介してみます。ちょうど、大学入試センター試験（国語）で「デザイン」や「アフォーダンス」が取り上げられたこともあり、このタイミングで書いてみることにしました。 認知心理学の学問分野は広大ですし、僕は認知心理学者ではありませんので、あくまでも、１）デザイナー向けに、２）仕事に役に立つ、３）入門書、 という観点で選びました（前半の入門編）。 （僕自身は、多摩美術大学の大学院生の時に、須永剛司教授（現・東京藝大）の研究室で、インタフェース・デザインの実践研究をしながら、文献や論文、ゼミの輪読、学会や勉強会などを通じて、認知科学／認知心理学を学び、それがその後のインタラクション研究に続いていきます。） 後半の中級〜上級編には名前がよく出てくる有名

ここ数日、違法漫画アップロードサイトが俄に話題だ。 皆いろいろと憤っている。当然だ。完全なる著作権侵害、知財の無断利用で金を儲けている奴など断じて許してはならぬ。別に違法サイトを擁護しようというつもりはさらさら無い。 が、それを前提にちょっと皆に聞いて欲しいことがある。どうしても言いたい事がある。 あそこの配信サイトもこの電子書籍ビューアも、お前ら全員もっと漫画村を見習えクソが！！ いやもう正直言って今更サイト名伏せる意味もそこまで無いやろと思うので特に伏せずに発言する。 漫画村は確かに違法サイトであり、「タダで漫画が読める」というのが一番大きなセールスポイントだ。しかし、だ。ハッキリ言うが漫画村は「タダで漫画が読める」という点を差っ引いても、下手な正規ルートよりよっぽどユーザーに優しい作りになっている。その事については強く主張したい。 私が漫画村という名前を知ったのは半年ほど前だ。確か「

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーが使う手段の中で、「色」はもっとも強力なツールの１つです。同時に、色という概念は習得するのが難しくもあります。色の組み合わせが無数にある中で、サイトやアプリに使用する色を決めるのは骨の折れる作業です。 そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような切り口から便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 色のアクセシビリティを考慮する １. インスピレーションを受ける 自然の風景 あなたの周りには、既にたくさんのひらめきのもとがあります。インスピレーションを受けるには、周りを見回す

12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識

それはもう「テキストエディタ」と別物といっていい。価格は3000円。書き手の目線、余白、グリッド…細部にこだわり、無駄を排除。『stone』は書く心地よさのみを追求し、App Storeでも1位*を獲得した。つくったのは日本デザインセンターの面々。あらゆるプロダクトに活きる、心地よさのデザインとは？ (*)... 2017年12月2週目時点 心地よさにこだわり抜いたエディタ「stone」 日本を代表するグラフィックデザイナー、原研哉さん率いる日本デザインセンター（NDC）が、とてもユニークな自社プロダクトをリリースした。それが『stone』だ。 広義でいえばテキストエディタの類だが、あまりにもシンプルなつくり。アプリを起動し、映し出されるのは真っ白な画面。言われなければエディタだとわからないかもしれない。 「僕らが意識したのは、触感であったり、気持ちよさなんです」 今回お話を伺ったのは、企