寝ても覚めても犬が好き

WEBディレクターが犬とロックとWEBと食べ物のことなどを綴るブログ

トップ > WEB制作

CSS Nite LP57　All About XDにいってきました

勉強会 WEB制作

cssnite.jp
CSS Nite LP57　All About XDにいってきました。

ふたんXDを使うことは多いものの一人完結、プロトタイプ作成のみに終始していたので
ふだんの業務の中でどういうふうに組み込んでいくのかに一番興味がありました。
それぞれのセッションで興味深いお話がたくさん聞けたので本当に行ってよかったです！

XDの知らなかった機能を知れたのはもちろん、
今までクリエイティブクラウドの機能をほぼ使っていなかったんですが、
（イラレやフォトショでパーツを作ってコピペしていた）
クラウドで同期するのがめちゃくちゃ便利だったので使わねばと思いました。
最近は複数メンバーでプロトタイプを作成する場合もあるため、
素材のやりとりを考えると本当に使わない手はないです。

また、お目当てのコミュニケーションツールとしてのXDの側面のお話しを聞き、
今まで以上に業務のいろんなところで取り入れて試行錯誤してみようと思いました。
手始めにパワポで作ってた画面仕様をXDに切り替えます！

セッション1 「XDが提案するこれからのデザイナーの働き方」

長谷川 恭久さん

最新のテクノロジーを紹介しつつ、これからのデザイナーの業務の関わり方をお話してくださいました。
AIに勉強させるためにデザイナーを雇う話はディストピア感があって興味深かったです。

セッション2「今日から使えるようになる！Adobe XDの基本的な利用方法」

濱野 将さん

基本機能のおさらいをしつつ、新しい機能の紹介も。
まだ把握していなかった新しい機能の紹介がとてもわかりやすかったです。
まだXDを触ったことのない人におすすめしたいセッションでした。

セッション3「Webサイト制作における「デザイナーの制作ツールとしてのXD」その活用方法」

佐藤 修さん

業務にすぐ使える便利Tipsの連続で「ありがたやー」の連続でした。
特にリピートグリットのコツは「社内のみなに広げねば」と思いました。

セッション4 「コミュニケーションを可視化する！XDストーミング」

池原 健治さん

またまた業務にすぐ使える便利Tipsの連続でした。
社内のコミュニケーションについてを詳しく聞けたのがとてもおもしろかったです。

セッション5 「あらゆるワークフローを改善！ デザインツールを越えたXDの底力」

田中 忍さん

こちらのセッションもXDをさまざまなお業務に組み込むお話でした。
具体的なプロジェクトの中での使い方を見せていただけるのはとてもありがたかったです。
赤入れに使うアイディアは早速取り入れようと思います。

セッション6 「Adobe XDアドバンスド〜最先端プロトタイピング手法の実践」

境 祐司さん

XDのほかにPhotoshopの機能やprotopie.ioとの連携、AdobeMuseの使い方など盛りだくさんでした。
AdobeMuse、全然使ったことがなかったんですが本当に便利でびっくりしました。
あとAdobeスパークのレイアウト機能マジハンパない…
てゆーかAdobeさんマジハンパない…

セッション7 「ディレクターが考えるXDの導入・活用方法」

栄前田 勝太郎さん

ちょうど前日に本を買った栄前田 勝太郎さんのセッションだったのでとても楽しみにしていました。
（本もまだ読みかけですがとてもわかりやすくて面白いです）
↓　買った本

できるところからスタートするコンバージョンアップの手法99 [ 栄前田勝太郎 ]

できるところからスタートするコンバージョンアップの手法99 [ 栄前田勝太郎 ]

ディレクターが今すぐ使える部分改修や新規コンテンツの追加などの打ち合わせ時のXDの使い方がとてもわかりやすかったです。
wire.jpは非デザイナーじゃない色んな人に教えます！
https://blogs.adobe.com/creativestation/web-adobe-xd-ui-kit-wires-jp

セッション8 「Adobe XDとともに進化するデザインの未来」

湯口 りささん　北村 崇さん

XDのアップデートを振り返りと機能の解説のセッション。
コメットのときから触ってはいましたが振り返るとすごい速さで便利になっているんだなーと実感。
活用事例のお話もとてもおもしろかったです。


今週から早速学んだことを使って行くぞー！と思いました。
（いただいたXDシールはMacにはりました★）

読書日記「図解大学4年間のマーケティングが10時間でざっと学べる」

WEB制作

最近お仕事でマーケティングの勉強が必要になったのでアウトプットも兼ねて書きます。

 

図解大学4年間のマーケティングが10時間でざっと学べる／阿部誠【3000円以上送料無料】

図解大学4年間のマーケティングが10時間でざっと学べる／阿部誠【3000円以上送料無料】

 

基本的にはわたしはWEBを中心に関わるので「ウェブマーケティング！」と思ったんですが、とはいえ「マーケティング自体の基礎をざっとは知らないと」と思い読みました。

4P、STP、4C、SWOTなどの基礎用語から様々なマーケティングの手法が3部構成でわかりやすくまとまっています。

1部と2部は上述したような用語のお勉強や基礎が中心ですが、

3部はインターネットやシェアリングエコノミー、AIなどふだん接する用語も多かったんですが、1部と2部を読んだ後だとちょっとだけ深く理解できたように思いました。

AIDA→AIDAS

従来のAttention,Interesting,Desire,Actionから＋share は深くうなずきました。

 

というわけでお勉強がんばる。

 

読書日記「予想どおりに不合理 行動経済学が明かす「あなたがそれを選ぶわけ」」

WEB制作

小説や漫画以外に読んだお仕事関係の本の感想メモ。

 

予想どおりに不合理　行動経済学が明かす「あなたがそれを選ぶわけ」

予想どおりに不合理 行動経済学が明かす「あなたがそれを選ぶわけ」 （ハヤカワ文庫NF　ハヤカワ・ノンフィクション文庫） [ ダン・アリエリー ]

予想どおりに不合理 行動経済学が明かす「あなたがそれを選ぶわけ」 （ハヤカワ文庫NF　ハヤカワ・ノンフィクション文庫） [ ダン・アリエリー ]

 行動経済学の本を読もうと思っていろいろ調べて、評判がよくかつ一番読みやすそうな本を選びました。

授業以外で経済学の本を読むのははじめてだったのでやや身構えてましたが、平易な文章で書かれているので全くもって問題なかったです。

（大学の教科書のイメージだった）

「選んでほしい選択肢があるときは明確に比べる対象を置く」

「社会規範と市場規範」「金銭がからなまいほうが利己を追求しない」

「複数の人がいる場合、最初に選択する人以外、自分の選択は他の人の選択の影響を受ける」など実際にあるあるな感じを理論的に説明していて大変わかりやすかったです。

実験がどれもとても興味深い。

「UXをお勉強するなら行動経済学」的に言われているのもわかりました。

 

 

「あるある」で学ぶ 右肩上がりのWebマーケティング（できるビジネス）

「あるある」で学ぶ右肩上がりのWebマーケティング （できるビジネス） [ 山道正明 ]

「あるある」で学ぶ右肩上がりのWebマーケティング （できるビジネス） [ 山道正明 ]

 CSS Niteで同じグループの方がじゃんけんに勝ったのでいただけた本。

サイト運営の作業や体制についてわかりやすく書かれているので

これから携わる人には最適な一冊かなーと思いました。

「ディレクションって何？」「運用っなに？」「どんな作業が発生するの？」

的な疑問に丁寧に答えています。

 

 

 

 

 

 

アシアル株式会社様のMonacaリニューアル会議にお邪魔してきました！

WEB制作

f:id:singarden:20180116235804j:plain

素敵なミーティングスペース
先日、MonacaのWebサイトをリニューアルするというお話があり、そのヒアリング対象としてご招待いただきました。
Monacaを運営しているアシアル株式会社様にお邪魔して、そのインタビューとディスカッションに参加しましたので様子を簡単に記載します。
アシアル株式会社様はHTML5を使ったクオリティの高いアプリ開発や、
アプリ開発プラットフォームのMonaca、モバイルUIフレームワークのOnsen UIといった魅力的なサービスをお持ちの会社です。
 
話し合いの中で、Webサイトのランディングページ（LP）についての議論がありました。
議論の進め方など大変参考になりましたので共有します。
 

Monacaとは？

MonacaはjQuery、Angular、React、Vue、Ionicなどを使ってサクサクHTML5アプリを開発できるサービスです。
開発したアプリはRun on Drive機能ですぐに実機で確認可能！
（実機で確認可能なのは個人的にはとてもありがたい…）
 
 
わたしは会議2日目、主にLPについての打合せに参加させていただきました。
 

まずはLPのペルソナの設定

Cordovaでアプリ開発をはじめる人（ふだんUI設計をしている、PC・モバイルともWEBの制作はしている）
　　　　↓
憧れはCordovaで成功してる人
　　　　↓
わたし！！
 
となりました！
大変光栄です。
 
★ペルソナとしての「わたし」についての簡単な説明★
  • システム開発会社のPM、ディレクター
  • 企画やUI設計やデザインなども担当
  • プロジェクトの技術選定なども行う
  • Cordovaでのアプリはまだ未体験

 

そしてLPの簡易ストーリー

  • 起：予算がない！実装できる人がいない！
  • 承：よくわからないから検索して何かいいものがないか探してみよう
  • 転：Monacaを発見！採用して学ぶ
  • 結：無事にアプリ完成、納品
となりました！
 

Monacaのコンセプト：HTML5でアプリを作ることをあたりまえに

というわけでコンセプトを踏まえてLPで訴求する内容の候補として以下のようなものが出てきました。

 

Monacaのメリット

次に具体的にエンジニア・コーダー・UIデザイナーにとってのMonacaのメリットとして

  • 自分の持っているWEBの技術を使ってできることを増やしていく
  • 1人1人のやりたいことをWEBの技術を使って実現する
  • 技術選択を助けるためにその技術についての情報を与えたい
  • その人の技術レベルにあわせてやりたいことをするための手段を提供していく

というものがあがりました。

★ペルソナとして思ったこと★

「自分の持っているWEBの技術を使ってできることを増やしていく」というメリットは大変魅力的に感じました。

（技術選定を行う場合、コストの面でも魅力的です）

田中様のお言葉にもあったように「その人の持っている技術で目標に到達できるように、Monacaはレールを敷いていく」というコンセプトがとても素敵で心に響いたのです。

というわけで上記のような内容がわかりやすくLPで訴求されていれば「多くのエンジニアやコーダー、デザイナーに響くのでは？」と今回のペルソナとして強く思いました。

 

モバイルUIがわからないユーザーも対象ユーザーでは？？

大手のSI等の場合、モバイルUIがわからないユーザーもいるとのことなので

  • 全体がわかるチュートリアルがあったほうがいいのでは？
  • UI設計をできる人の裾野を広げるという意味でMonacaの外でアシアル様がセミナー開催
  • UI設計のサポートチケットもあればいいのでは？

といった検討事項も。

 

LPは非技術者向けと技術者向けをわけたほうがいいのでは？

「モバイルUIがわかるユーザー、わからないユーザーで必要なことは違う」議論を経て「LPは非技術者向けと技術者向けをわけたほうがいいのでは？」という話しになりました。

モバイルUIがわかる・わからないで差が出るのであれば、それ以上に意思決定を行う非技術者向けのコンテンツは訴求内容が異なるべきであり、同一のLPにする事は難しいという結論に。

非技術者向けのLPの内容についてはペルソナ、簡易ストーリーともに別のものを用意する必要があるかと思いますが、そちらも楽しみです。
 

そのほか

その他のアイディアとして

  • サインアップ周りのフローの改善
  • 新しいプランとしてコミッタープラン（仮）を作る：ブログを書く、登壇するなどしてMonacaをコミット（宣伝）してもらうかわりにフリープランよりも内容を充実させる
  • リニューアルにあたってティザーサイトの作成

といったものも出ていました。

 

最後に

最終的にどんなLPができあがるのかとても楽しみであり、
Monacaのリニューアルがとても待ち遠しくなる会議でした。
まさか自分がペルソナになるなんてびっくり！！
活発な議論に参加させていただき大変ありがたかったです。
 
アシアル株式会社の田中様、又川様、一般社団法人リレーションデザイン研究所の榊原様どうもありがとうございました！
 

 

WordBench京都でお話しました！

WEB制作 勉強会

f:id:singarden:20171120103725j:plain

写真は前日にいった三室戸寺


 

はじめての社外でのお話する機会＞＜
わたしはシステム開発のディレクションについてお話させてただきました。

 

スライドはこちら↓

speakerdeck.com


ガッチガチに緊張して死ぬかと思ったんですが
本当に登壇してよかったしお勉強になることが山ほどあって楽しかったです。
みなさまありがとうございます。

質問してくださったみなさまも本当にありがとうございます。

 

そして！！私以外の方の発表がとても勉強になることがてんこ盛り！！

 

■フリーランスWebデザイナーが楽しく仕事を続けるためにやっていること（よしぱんちゃん）

 

www.slideshare.net 

とてもわかりやすく発注側として気をつけるべきことが山盛りありました。

特に見積の部分やヤバい案件のパターンなどデザイン案件に限らず全ての案件に関わる大事なことが簡潔にまとまっていてうなずきが止まらなかったです。 

よしぱんちゃんは素敵なブログをずーっと運用されているのでぜひ☆　↓

yoshipan.com

 

  

■Webディレクターのためのプロジェクト管理術、WBS（ワーク・ブレイクダウン・ストラクチャー）（Rie Fujisawaさん）

 

www.dropbox.com

WBSでのスケジュール管理について、実例を交えながらのお話。

わたしもスケジュール管理はまだまだなのでとてもお勉強になりました。

Asanaは好きなツールなのでうれしみ。

取り入れられる部分から取り入れていきたいです。

 

 

■カンパイ本町を支える技術（ミスミ タクマさん）

 

speakerdeck.com

WordPressではなくNetlifyとHugoとGitHubを使ってのブログ運用について。

Netlifyの話が個人的にめっちゃ高まりました。使ってみたいっす。

 

カンパイ本町

https://knp-honmachi.net/

食べに行きたいお店がたくさんあって空腹時に見るとやばし。

 

 

■WordPress.comで大体1ヶ月くらいブログを書いてみてわかったこと（Daisuke KONISHIさん）

 

speakerdeck.com

 

WordPress.comについて簡潔にまとめてくださってました。

ありがたや。

「ブログ書くときは意識をさげる」というのがブログをはじめたばかりのわたしに響いたヒットワード。

 

 

■「稼ぐ」以外でブログ発信を楽しむ視点あれこれ（rokuzeudonさん）

 

www.slideshare.net

ブログに対する愛が超伝わりました。

ブログ＝盆栽論や運用に関して気をつけていること、ネタさがしなど盛りだくさんにまとめたスライドがとにかくわかりやすかったです。

おもしろくてあっという間でした！

いらすと屋さんの使い方がしびれました。

おじいちゃん、最高…。

 

わたしの貧弱な語彙では伝えきれない思いはご本人のブログに100倍素敵にまとまっています↓

 

blog.rokuzeudon.com

 

 

 

■座談会 - ブログについて腹を割って話す会

ブログのことからWordPressの便利プラグインまでみなさんのお話をきけました。

お話に出ていたプラグインの抜粋です。

 

  • updraft plus
バックアップを定期的にとってリストアしてくれるプラグイン
 
  • push press
googleがすぐインデックスしてくれる
 
  • WP Multibyte Patch
日本語版ダウンロードするときには必須
マルチバイト文字の不具合を修正
 
GooglePhotoから写真を引っ張ってくるプラグイン。
 

■まとめ

実際に自分が話すと目線がかわる

 

自分が話してみるとセミナーや勉強会に参加したときの目線が結構変わりました。

本当に超良い機会をありがとうございますm(__)m

うっかり者に超おすすめ！丈夫でかわいいMacBookProケース

WEB制作

f:id:singarden:20171014161254j:plain

Macを毎日持ち歩いていると、

急に雨に降られたり落としそうになったりという予想外なことがおこりえます。

わたしは人の5倍くらいうつけものなので、

商売道具であるMac様を危ない目にあわせてしまうこともしばしば…。

 

そこで物理的に頑丈なケースを買いました！

うっかり者はなおらないけどMacのガワは強化できる！

 

THULEは防水（完全防水ではないそうですが、台風の雨ごときでは水がしみたことはないです）、耐衝撃という優れもの。

www.thule.com

しかも色も形もかわいい！！

リュックも優れもののようですが秋葉原でかぶり倒します。

 

何気に収納力があるのでMacBook Proと一緒に

も一緒にいれています。

 

f:id:singarden:20171014163801j:plain

 

機能的なPC周りの小物はデザイン二の次のものも多いですが、

こちらは比較的全て備えているので満足しています。

 

ちなみにApple Storeで買ったら25年保証って言われたんですが、

25年後のMacBook Proはどんな形になっているんでしょう？？

【盲点】Facebookの複数アカウント使い分けは原則アウト

WEB制作 SNS

f:id:singarden:20171012212851j:plain

PCを横目で眺めるFacebookカラーの服を着たうちのわんこ


先日SNSマーケティングの勉強会に行ってきました。

そこで

 

仕事用とプライベート用のFacebookアカウントの使い分けはアウト

www.facebook.com

 

というルールを恥ずかしながらはじめて聞きました。

（ディレクターのくせに…）

Facebookで複数アカウントを所持している場合、

その行為自体がFacebookのポリシーに反するため

ある日突然アカウント停止されることもあるそうです。

 

個人用と仕事用でアカウントを複数使い分けていて、

仕事用のアカウントに会社などののFacebookページを紐付けている場合、

ある日突然アカウントを停止されて管理画面に入れなくなるケースもあるとのこと。

使い分けは「公開範囲で調節してください☆」ということだそうで。

 

複数アカウントを所持している場合はアカウントをどれか1つに統合すべきなんですね。

なるほどなるほど。

とはいえできれば使い分けたいですけどね！