新入社員のこばかなさんが、「こばかなスケッチ」という自分企画を頑張っている。THE GUILDでの日々の仕事と、読書で学んだことを、一枚のスケッチにまとめるチャレンジだ。 彼女のスケッチが溜まってきたので、復習とサポートを兼ねて、解説を書いていきたい。第二回はこの絵。 行動 = 動機 × 実行能力 × きっかけ今回のこばかなさんのイラストは、「フォッグの消費者行動モデル」という概念モデルだ。ざっくり言うと、ユーザーが行動を起こすために必要な3条件を示している。 このモデルでは、「ユーザーが何かアクションを起こす」条件を、 B = MATという、とてもシンプルな式で表現する。 その意味は、「行動(Behavior)」には、「動機(Motivation)」と「実行能力(Ability)」があるタイミングで、「きっかけ(Trigger)」が訪れなければならない…というものだ。 ・動機(Motiv
ご覧の通り料金が2倍高い単体プランのほうが利用できるサービスは多くなっている。 フォトプランの方だけLightroomが使用可能になっているが、Photoshopがあれば済むことが多くあるため、あまりアドバンテージがない。 学生・教育員の料金はフォトプランと単体プランのどちらも月額980円なので利用できるサービスが多い単体プランを利用したほうがお得である。 上記の結果からオンラインストレージ20GB以上、Typekit、Creative Cloudマーケットを使用しない場合は月額980円フォトプランを使用したほうがお得ということになる。 単体プランの利用者が多い理由 Photoshopを使用するだけであれば単体プランよりもフォトプランを使用したほうが安いということはわかったが、そもそもなぜ月額2180円の高いプランを使用している人が一定数いるのか最初疑問に感じていた。 だが最近になって「単
ReactJSで作る今時のSPA入門(基本編)で作成したプロジェクトをリリースビルドしてデプロイする構成についての説明です。 リリースビルド リリースビルド用に次のようなディレクトリ構成に変更します。 client部分だけBabelでリリース用ビルドをするため、 package.jsonをclient、server、プロジェクト全体で持つ構成にします。 distフォルダにBabelのビルド結果を出力して ローカルからAWS EC2サーバにrsyncでデプロイする想定です。 configフォルダにはサーバ、クライアント共通の設定ファイルを格納してあります。(サーバの起動ポート番号など) ├── README.md ├── client │ ├── dist │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── co
みなさんごきげんよう。yamashitaです。 最近トピックは特にないですが、アニメのゴジラを見てない人はこの記事を読み終わったらすぐ見にいってください。 ※記事の内容はゴジラと一切関係ございません さて今回は加速度の取得方法についてです。 スマホについている加速度センサーの値って使えるのかな? 位置情報とか傾きはどこでも使ってるけどあまり使われてないかなと思い まさか取得できないなんてことは・・・と思ったら簡単に取得できました。 早速取得する方法の紹介 まずは必要なjsを読み込みます <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="jQuery
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら3つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
ReactのコンポーネントのCSSをもっとスマートにしたいというのが発端です。 CSS-in-JSやCSS Moduleを使ってCSSを管理していると<style>...</style>がたくさんできてしまってスマートでない。 <実装前> そこで、<style>タグひとつにまとめる方法を考えてみました。 <実装後> スマートになっていい感じ。 方法 ReactのcomponentDidMountもしくはcomponentWillMountでCSSを生成し、それを<style></style>タグの中へ入れる。 import { h, Component } from 'preact'; import { Link } from 'preact-router/match'; import Client from '../../../functions/client/index'; impor
最近Webサイトやアプリを使っていて遭遇した、ちょっとイラっとした点をまとめました。 一ユーザーの意見というか愚痴なんですが、アプリを開発している人の参考になればと思います。 非同期読み込みに失敗してもわからないサイト 最近のWebサイトではデータを非同期で読み込むものが増えてきましたが、読み込み失敗時のエラーハンドリングが行われていないサイトが結構あったりします。 なかにはローディングマスクが表示されたまま操作不能になる場合もあります。 ユーザーがエンジニアであればデバッグコンソールを開いてエラーが発生していることに気づきますが、一般人はそんなことはせずに「このサイト使えねー」で終わってしまいます。 非同期読み込みではちゃんとエラーハンドリングをして、メッセージを表示するなり、リトライするなり対策しましょう。 非同期読み込みで位置がずれるボタン 非同期読み込みを行なっているWebサイトで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く