@kotyのブログ

PythonとかAWSとか勉強会のこととかを、田舎者SEがつづります。記事のライセンスは"CC BY"でお願いします。

書籍 超実践的Webディレクターの教科書 読了後メモ

web制作

お久しぶりです。何とか生きています。

今までは誰かがやってくれていたことなのですが、必要に迫られてWeb制作関連の勉強をしています。今回は以下の本を読みました。4年前の本なので挙げられているツールやwebサービスは古いものももしかしたらあるかもしれませんが、web制作の本質的なノウハウは変わらないと思います。参考になりました。

第一線のプロがホンネで教える 超実践的 Webディレクターの教科書

第一線のプロがホンネで教える 超実践的 Webディレクターの教科書

以下、自分のためのまとめです。

ディレクターの職能

web制作の要素とも言える。

できるディレクターは、予算・人員・品質のバランスを取りステークホルダーに提案につなげる。

ヒアリング〜コンセプト設計

以下の会話により、ステークホルダーが持っている要求を言語化する

  • ステークホルダーには「何がほしいか？」ではなく「何がしたいか？」を問いかける
  • それに対して自分なりの言葉で「つまりこういうこと？」を何でもいいので返す。→ 所感：小さな仮説だな。
  • 反論がきたら「その反論てこういうこと？」と返す
  • 同意がきたらきたで、「その同意ってこういうこと？」と返す

サイトコンセプトを作る際はキャッチコピーを作る。→ 所感：サブタイトルとかOGPのdescriptionに来るセンテンスかな。

情報設計＆感情設計

所感：そもそも感情設計なる概念を初めて知ったのでこの項は全体的に参考になった。

箇条書き2レベル目の詳細についての切り口は、案件の性質により変わってくるだろう。

  • 前提となる背景・目的・課題を名確に言語化する

    • プロジェクトの背景
    • 想定される課題
    • 最終的な目的の明確化と共有
    • シーズとニーズの両方を把握

  • ポジションを把握してコンテンツを設計する

    • ビジネスモデルが競合するサービスがないか？
    • 集客方法や集客対象が似たものはないか？
    • ニーズに対し提供する価値が似たものがないか？
    • サービスの性質やユーザーの心理属性が似たものはないか？

  • ユーザー像とシチュエーションを仮定する→所感：ペルソナだな

    • 何歳のどんな人？
    • 普段何をやってて、何が好きで何が嫌い？
    • どんな格好をしていてどんなときにサービスに触れる？
    • サービスに触れたユーザーは何を期待して、使ってみて何を感じる？
    • そして最終的にユーザーに何をしたいと思ってほしい？

  • ユーザーの感情を設計する際の思考フロー

    • まずは感じてほしい感情を決める
    • 時系列の必要感情を探し出す
    • それぞれをより強く感じさせる演出を考える
    • ユーザーに直接聞いてテストを繰り返す

コンテンツ設計

いきなりワイヤーフレームを作るのは絶対NG。

  • カスタマージャーニーマップの作成 → 所感：前項の感情を具体的なシナリオにあてこんで必要なコンテンツを考える感じだろうか
  • コンテンツ重要度マップ
  • ディレクトリマップ

ここまでできたら、必要な画面の一覧を作る。その後、

  • 下書き（手書きでOK）

  • ワイヤーフレーム作成。色は付けず、ラベルや原稿はリアルに作る とすすめる

  • プロトタイプツール

  • Prott
  • Prototyper

コンテンツマーケティングの基本

徹底的にニーズから考える。書きたいものや言いたいことに価値はないときめつける

進行管理とチームビルド

プロトタイプはメンバーに完成形をイメージさせることができ、チームのモチベーションを上げる。所感：これに限らずチームのモチベーション管理についてたびたび言及があり印象的だった。

おわり

自分の守備範囲を決めずに、世界を広げる機会と思って取り組みたい。

AWS IoT エンタープライズボタンを使って風呂の給湯スイッチを押す

4月から2世帯住宅に住んでいます。平日の夕方は1階で食べてその後に2階で風呂に入る流れです。この際1階にいながら2階の風呂の給湯ができれば便利だと考えてやってみました。

以下のような感じです。

AWS IoT エンタープライズボタンを使っています。お値段2,500円。

www.amazon.co.jp

IoTボタンを押してから給湯パネルのボタンを押すまでの流れは以下です。

AWS IoT エンタープライズボタン押下
↓
AWS IoT 1-Click
↓
AWS Lambda
↓
IFTTTのWebhook
↓
Switch Bot Hub
↓
Switch Botが2階風呂の制御パネルのボタンを押下

AWS IoT 1-Clickは月額25円ほどかかるようです。

AWS Lambdaを呼ぶところまでは、以下のサイトを参考にしました。

dev.classmethod.jp

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 スイッチボット スマートホーム 学習リモコン グーグルホーム Alexa -IFTTT イフト Siriに対応 SwitchBot Hub Plus (Hub Plus)

SwitchBot スイッチ ロボット スマートスイッチ タイマー機能搭載 iot スマートホーム スマホで 遠隔 ボタン コントロール 貼り付け簡単 いろんな家電のスイッチに適用 Hub Plusを使えば Amazon Alexa Google Home IFTTTなどに対応可能（白）

SwitchBot スイッチ ロボット スマートスイッチ タイマー機能搭載 iot スマートホーム スマホで 遠隔 ボタン コントロール 貼り付け簡単 いろんな家電のスイッチに適用 Hub Plusを使えば Amazon Alexa Google Home IFTTTなどに対応可能（白）

無職期間振り返り

3月〜5月の3ヶ月間無職でした。その間にやったことを列挙します。どうでもいいけど国保料が高くてびびった。

期間中何度もギーラボで作業させてもらいました。ありがとうございました。

作ったもの

flutterの勉強で作ったもの

play.google.com

play.google.com

railsの勉強で作ったもの

github.com

読んだ本

The Manager's Path: A Guide for Tech Leaders Navigating Growth and Change (English Edition)

The Manager's Path: A Guide for Tech Leaders Navigating Growth and Change (English Edition)

エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング

エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング

日本人のための 一発で通じる英語発音

日本人のための 一発で通じる英語発音

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法（東進ブックス）

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法（東進ブックス）

英語留学

koty.hatenablog.com

引っ越し

必ずしも良いことばかりではないのだけど、家の竣工がずれ込んで無職期間に引っ越すことになったのはラッキーだった。荷づくりや諸手続きも余裕を持ってできた。

水泳

渡航中を除き週2,3回のペースで泳げた。swarmappにしか記録がなく集計できないのが残念なので、記録方法を見直さないととなぁ。泳力はまあまあ戻りました。

所感

稼働日は60日弱。これらのことを3ヶ月の職を賭してやるべきだったのかはよく分からんけどやりたいことはやり切った。無職期間を作ることを許してくれた奥さんには本当に感謝しています。ありがとう。次の職場でがんばります。

日報58日目

日報

今日が最終稼働日である。数え直したら3,4,5月の平日は59日あったのでどっかで数え間違えているっぽい。まあいいや。

午前中は読書。ESLの課題図書をようやく読了した。ネイティブがどういう感覚で英語を使っているのか書いてあり、（とてもすぐ使いこなせるわけではないけど）良書である。

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法（東進ブックス）

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法（東進ブックス）

午後はFLEXISPOTが到着したので組み立てた。まず箱が半端でない重さである。玄関からの運搬および組み立てをひとりで行うのは避けたほうが良い。身の危険を感じた。それと、天板を取り付けるのに電動ドライバーは必須。

FLEXISPOT スタンディングデスク 電動昇降デスク 高さ調節パソコンデスク メモリー機能付きPCデスクブラックE1B (ブラック)

FLEXISPOT スタンディングデスク 電動昇降デスク 高さ調節パソコンデスク メモリー機能付きPCデスクブラックE1B (ブラック)

こうして最終日が終わったのでした。この3ヶ月の振り返りは別エントリーにて。

日報57日目

Ruby 日報

午前中散髪。ここのところずっと家でバリカン使って坊主にしてもらっていたところ、何年かぶりに美容院に行った。

午後はrailsの勉強。残件はアカウント削除機構を作ることのみ。

cloudfrontを通すことでhttps化をしようとして少し手間取った。

  • cloudfrontでヘッダを通していなかった
  • これ にはまった

最終的にはhttps化できた。

勉強になったり、

異文化を感じたり、

twitterで教えてもらったり、

今日も勉強になりました。残すはあと1日だ。

日報56日目

Ruby 日報

本日もrailsの勉強

作業内容

github.com

けっこう満足できる出来になってきた。ボタンにアイコンを入れると雰囲気が良くなる。font-awesome便利。

f:id:kkotyy:20190529163032p:plain

f:id:kkotyy:20190529163132p:plain

残課題

  • 勉強兼ねて、全くしていないvalidationを入れる
  • 触ろうとしているデータがログインユーザーのものかチェックする
  • 退会＆データ削除機能

所感

pythonとのカルチャーの違いを感じる日々です

日報55日目

Ruby 日報

今日もrailsの勉強

残課題。今週中には出来上がるんでは。。。

  • 直前詳細データは直前の入力内容であらかじめ埋める
  • 見た目を整える
  • slackへの投稿機能
  • 触ろうとしているデータがログインユーザーのものかチェックする
  • 退会＆データ削除機能

どうしても、よく知っているDjangoと比べてしまう。

  • Python/Djangoの方がどう考えても初期の学習コストは低い。慣れればRoRの方が記述量が少なく書けそう。
  • フロントに一切関知しないDjangoの方がSPAとの相性は良い。railsは中途半端にフロントもサポート(turbolinkとか)している点が現代のSPAに合わないように思う。