書籍 UIデザインの教科書 読了後メモ
次に読んだのはこの本。
1章 デザインの目的とUI/UX
- 「UXは、対象に関わり始めてから(知ることになってから)忘れ去るまでの、すべての体験」 所感:例えばURLのQRコードをスキャンするところから始まっている。退会もUX
2章 物理的な制約
3章 人間の認知特性
- カテゴリ分類に色を使うことによる状況理解の促進
色の効果を最大限に引き出すためには、安易に色数を増やさない 所感:フォントを安易に増やさない、と同じ話だな
人間の顔は注目を集める。人間の顔が入った広告のほうがコンバージョン率が良いというデータがある
5章 階層と構造
ラベリングは排他的につけること。 所感:ラベリングはメニュー名みたいなもの。排他的と同時にレベル感も合わせた方が良いんだろう。MECE重要。
トップ→一覧→詳細 がひとつのパターンだが、詳細に来たあとにさらに回遊を促す。AmazonやYoutubeなど様々なサービスで行われている
6章 ナビゲーションとインタラクション
- マイクロインタラクション → 所感:出されている事例がかわいくて良いが、優先度はどうしても下がるなぁ
- 特にスマホだとヘッダは場所を取るので、スクロールしたら隠す。
- 上下にヘッダ・フッタが表示されたままだと、スクロールの「抜け」が悪い。すくなくともどちらかは隠す。
- 要素の見切れを意図的に作ることにより、横スクロールできる感を伝える
おわり
そろそろ何か試しに作ってみる。
書籍 理論でわかるデザイン入門 読了後メモ
引き続きweb制作の勉強をしている。
2年前の本。冒頭で語られている「ITエンジニアとデザインスキルの"関係"および"現状"と"課題"」は納得感がある。 自分を含め多くのシステムエンジニアは「デザインは専門外」と線を引いてきていたのが実際のところでは。しかし昨今はそうも言っていられなくなってきたわけだ。。。
以下自分のためのメモ
デザインの構成要素
- コンセプト
- ビジュアル・・・サイトのイメージを決定づける写真やグラフィック
- 文字・・・ビジュアルを補完また代行、情報そのもの
- 色・・・強調やイメージの補完
- レイアウト・・・記事を読みやすく編集し、配置する
- 線・飾り・・・記事をグループ化したり、デザインを補完する 意味なく「フォント」「色」「飾り」は使わない。
Chapter3. タイポグラフィ
- それぞれのフォントが持つイメージがある。サイトのコンセプトに見合うものを選ぶ。
- 基本はフォントは1つ
- 日本語フォントと欧文フォントは合わせる
- メリハリ、適度な余白、行間
Chapter4. 情報整理とワイヤーフレーム
- 次にどうすれば意図した情報を得られるかが分かるUI
- 大中小の3階層に情報をレベル分けする
- トップ画面から最大3ステップで情報を得られること → 所感:具体例があるとより分かりやすかった。
- 利用者が想起することに寄せる → 所感:ペルソナが十分具体化されている必要がある
所感
- シナリオを作るの部分は、カッコよく言うとカスタマージャーニーマップかなぁ。 *「プレグナンツの法則」の節も、具体例があるとより分かりやすかったが。。。
- ワイヤーフレームを作るにはツールに習熟するまでが、まず大変そう。
Chapter5. ビジュアル
- トップページに載せる写真は大変重要なのでプロの素材を買うのがおすすめ。iStock, PIXTA, Shutterstock, Fotolia など多くのストックフォトサイトがある
- 写真のトリミングには、3分割法を意識する
Chapter6. レイアウトとスペーシング
所感
実際に使いこなすのは難しそう
Chapter7. 色彩の基本
- ベースカラー、メインカラー、アクセントカラー
- ベースとメインの配色が曖昧or対比が強すぎる場合はセパレーションを置く
- ジャッドの色彩調和論、色彩対比と同化などその他いろいろと細かいノウハウがある。。
- 意味なく色を使わない。
所感
多くのページ数が割かれていた。カラーコーディネーターって資格もあるくらいだから、必要な知識は多い。 ただ実際にはベースカラー、メインカラー、アクセントカラーの組み合わせを数個選定して選ぶ、くらいしかまずはできないでは。。。 コンセプトに合う色の組み合わせを色見本の本から選べばいいかな。
Chapter9. デザイン実践のコツとポイント
- デザイン案は、そういうデザインをした意味づけをしたうえで複数案を作る
- その意味づけも含め、ステークホルダーと各案について議論する
おしまい
デザインに根拠を持て、デザインにセンスはいらない、と著者が繰り返し主張していたのが印象的だった。 そして、読み終わるには終わったけどこのままだと机上の空論だ。実践するとともに、普段使ってるWebサイトや街中にある構造物やPOPにも注目するようにしたい。
書籍 超実践的Webディレクターの教科書 読了後メモ
お久しぶりです。何とか生きています。
今までは誰かがやってくれていたことなのですが、必要に迫られてWeb制作関連の勉強をしています。今回は以下の本を読みました。4年前の本なので挙げられているツールやwebサービスは古いものももしかしたらあるかもしれませんが、web制作の本質的なノウハウは変わらないと思います。参考になりました。
第一線のプロがホンネで教える 超実践的 Webディレクターの教科書
- 作者:日本ディレクション協会 会長 中村 健太,株式会社デスクトップワークス 代表取締役 田口 真行,デジタルマーケティングオフィス DCHS 代表 高瀬 康次
- 出版社/メーカー: マイナビ
- 発売日: 2015/08/25
- メディア: 単行本(ソフトカバー)
以下、自分のためのまとめです。
ディレクターの職能
- プロジェクト統括
- 企画・設計
- UI制作
- システム開発
- 解析・運用
web制作の要素とも言える。
できるディレクターは、予算・人員・品質のバランスを取りステークホルダーに提案につなげる。
ヒアリング〜コンセプト設計
以下の会話により、ステークホルダーが持っている要求を言語化する
- ステークホルダーには「何がほしいか?」ではなく「何がしたいか?」を問いかける
- それに対して自分なりの言葉で「つまりこういうこと?」を何でもいいので返す。→ 所感:小さな仮説だな。
- 反論がきたら「その反論てこういうこと?」と返す
- 同意がきたらきたで、「その同意ってこういうこと?」と返す
サイトコンセプトを作る際はキャッチコピーを作る。→ 所感:サブタイトルとかOGPのdescriptionに来るセンテンスかな。
情報設計&感情設計
所感:そもそも感情設計なる概念を初めて知ったのでこの項は全体的に参考になった。
箇条書き2レベル目の詳細についての切り口は、案件の性質により変わってくるだろう。
前提となる背景・目的・課題を名確に言語化する
- プロジェクトの背景
- 想定される課題
- 最終的な目的の明確化と共有
- シーズとニーズの両方を把握
ポジションを把握してコンテンツを設計する
- ビジネスモデルが競合するサービスがないか?
- 集客方法や集客対象が似たものはないか?
- ニーズに対し提供する価値が似たものがないか?
- サービスの性質やユーザーの心理属性が似たものはないか?
ユーザー像とシチュエーションを仮定する→所感:ペルソナだな
- 何歳のどんな人?
- 普段何をやってて、何が好きで何が嫌い?
- どんな格好をしていてどんなときにサービスに触れる?
- サービスに触れたユーザーは何を期待して、使ってみて何を感じる?
- そして最終的にユーザーに何をしたいと思ってほしい?
ユーザーの感情を設計する際の思考フロー
- まずは感じてほしい感情を決める
- 時系列の必要感情を探し出す
- それぞれをより強く感じさせる演出を考える
- ユーザーに直接聞いてテストを繰り返す
コンテンツ設計
いきなりワイヤーフレームを作るのは絶対NG。
- カスタマージャーニーマップの作成 → 所感:前項の感情を具体的なシナリオにあてこんで必要なコンテンツを考える感じだろうか
- コンテンツ重要度マップ
- ディレクトリマップ
ここまでできたら、必要な画面の一覧を作る。その後、
- 下書き(手書きでOK)
ワイヤーフレーム作成。色は付けず、ラベルや原稿はリアルに作る とすすめる
プロトタイプツール
- Prott
- Prototyper
コンテンツマーケティングの基本
徹底的にニーズから考える。書きたいものや言いたいことに価値はないときめつける
進行管理とチームビルド
プロトタイプはメンバーに完成形をイメージさせることができ、チームのモチベーションを上げる。所感:これに限らずチームのモチベーション管理についてたびたび言及があり印象的だった。
おわり
自分の守備範囲を決めずに、世界を広げる機会と思って取り組みたい。
AWS IoT エンタープライズボタンを使って風呂の給湯スイッチを押す
4月から2世帯住宅に住んでいます。平日の夕方は1階で食べてその後に2階で風呂に入る流れです。この際1階にいながら2階の風呂の給湯ができれば便利だと考えてやってみました。
以下のような感じです。
AWS IoT エンタープライズボタンを使っています。お値段2,500円。
IoTボタンを押してから給湯パネルのボタンを押すまでの流れは以下です。
AWS IoT エンタープライズボタン押下 ↓ AWS IoT 1-Click ↓ AWS Lambda ↓ IFTTTのWebhook ↓ Switch Bot Hub ↓ Switch Botが2階風呂の制御パネルのボタンを押下
AWS IoT 1-Clickは月額25円ほどかかるようです。
AWS Lambdaを呼ぶところまでは、以下のサイトを参考にしました。
Lambdaから下の流れは、以下のサイトを参考にしました。
oita.oika.me lambda関数は以下です。ただhttp getするだけです。。。
import json import urllib.request def lambda_handler(event, context): url = 'https://maker.ifttt.com/trigger/xxxxxxxxxxxxxxxxxxxxxxxxxxxx' req = urllib.request.Request(url) with urllib.request.urlopen(req) as res: body = res.read() return { 'statusCode': 200, 'body': json.dumps('') }
AWS IoT エンタープライズボタンはほかにもいろんなことに使えそうです。Lambdaを呼べるので夢が広がりんぐですね。
しかし、眼の前のデバイス間連携なのに太平洋をまたいで通信するなんてバカバカしい話です。住宅設備がIoTに対応し、web apiを備えてほしいものです。
SwitchBot スイッチボット スマートホーム 学習リモコン グーグルホーム Alexa -IFTTT イフト Siriに対応 SwitchBot Hub Plus (Hub Plus)
- 出版社/メーカー: SwitchBot
- メディア: エレクトロニクス
- この商品を含むブログを見る
- 出版社/メーカー: Wonderlabs
- メディア: Tools & Hardware
- この商品を含むブログを見る
無職期間振り返り
3月〜5月の3ヶ月間無職でした。その間にやったことを列挙します。どうでもいいけど国保料が高くてびびった。
期間中何度もギーラボで作業させてもらいました。ありがとうございました。
作ったもの
flutterの勉強で作ったもの
railsの勉強で作ったもの
読んだ本
The Manager's Path: A Guide for Tech Leaders Navigating Growth and Change (English Edition)
- 作者: Camille Fournier
- 出版社/メーカー: O'Reilly Media
- 発売日: 2017/03/13
- メディア: Kindle版
- この商品を含むブログを見る
エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング
- 作者: 広木大地
- 出版社/メーカー: 技術評論社
- 発売日: 2018/02/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (3件) を見る
- 作者: 松井博
- 出版社/メーカー: ダイヤモンド社
- 発売日: 2019/04/11
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
一億人の英文法 ――すべての日本人に贈る「話すため」の英文法(東進ブックス)
- 作者: 大西泰斗,ポール・マクベイ
- 出版社/メーカー: ナガセ
- 発売日: 2011/09/09
- メディア: 単行本(ソフトカバー)
- 購入: 12人 クリック: 68回
- この商品を含むブログ (51件) を見る
英語留学
引っ越し
必ずしも良いことばかりではないのだけど、家の竣工がずれ込んで無職期間に引っ越すことになったのはラッキーだった。荷づくりや諸手続きも余裕を持ってできた。
水泳
渡航中を除き週2,3回のペースで泳げた。swarmappにしか記録がなく集計できないのが残念なので、記録方法を見直さないととなぁ。泳力はまあまあ戻りました。
所感
稼働日は60日弱。これらのことを3ヶ月の職を賭してやるべきだったのかはよく分からんけどやりたいことはやり切った。無職期間を作ることを許してくれた奥さんには本当に感謝しています。ありがとう。次の職場でがんばります。
日報58日目
今日が最終稼働日である。数え直したら3,4,5月の平日は59日あったのでどっかで数え間違えているっぽい。まあいいや。
午前中は読書。ESLの課題図書をようやく読了した。ネイティブがどういう感覚で英語を使っているのか書いてあり、(とてもすぐ使いこなせるわけではないけど)良書である。
一億人の英文法 ――すべての日本人に贈る「話すため」の英文法(東進ブックス)
- 作者: 大西泰斗,ポール・マクベイ
- 出版社/メーカー: ナガセ
- 発売日: 2011/09/09
- メディア: 単行本(ソフトカバー)
- 購入: 12人 クリック: 68回
- この商品を含むブログ (51件) を見る
午後はFLEXISPOTが到着したので組み立てた。まず箱が半端でない重さである。玄関からの運搬および組み立てをひとりで行うのは避けたほうが良い。身の危険を感じた。それと、天板を取り付けるのに電動ドライバーは必須。
FLEXISPOT スタンディングデスク 電動昇降デスク 高さ調節パソコンデスク メモリー機能付きPCデスクブラックE1B (ブラック)
- 出版社/メーカー: FLEXISPOT
- メディア: オフィス用品
- この商品を含むブログを見る
こうして最終日が終わったのでした。この3ヶ月の振り返りは別エントリーにて。
日報57日目
午前中散髪。ここのところずっと家でバリカン使って坊主にしてもらっていたところ、何年かぶりに美容院に行った。
午後はrailsの勉強。残件はアカウント削除機構を作ることのみ。
cloudfrontを通すことでhttps化をしようとして少し手間取った。
- cloudfrontでヘッダを通していなかった
- これ にはまった
最終的にはhttps化できた。
勉強になったり、
— Kouichi Unemployed Nishizawa (19) (@koty) 2019年5月30日
異文化を感じたり、
valid?とinvalid?か〜。異文化コミュニケーション!!!
— Kouichi Unemployed Nishizawa (19) (@koty) 2019年5月30日
twitterで教えてもらったり、
なるほど。。リロードしたときに再度Postしに行っちゃいそうですね。認識不足でした。
— Kouichi Unemployed Nishizawa (19) (@koty) 2019年5月30日
今日も勉強になりました。残すはあと1日だ。