徒然畑

徒然なるままに。

電車の中で一目惚れしたあの子(Webサイト)の秘密(ページソース)を知るためのテクニック(iPhoneでの表示方法)

良いデザインのあの子(Webサイト)やいつも気の利く情報をくれるあの子(Webサイト)のことをもっと知りたい…
そう思って意中の人の秘密(ページソース)を知りたいと思うことはよくある話だと思います(少なくとも私は)。
そしてそんな出会いは、いつも電車の中…
一目惚れしてしまった、君のことをもっと知りたい、だからページソースを見てみたい…
けどiPhoneでのソース表示どうすればいいの

この記事はそんな疑問にぶち当たった人のためのまとめです(決して恋愛ポエムや恋愛小説ではありません)

ブックマークレットを使って知る

Snoopy

snoopy.allmarkedup.com

ブックマークレット使った場合だとこれが有名どころかもしれませんね。
ページに書いてある手順に沿ってブクマに登録し、気になるサイトを開いた状態でSnoopyのブクマをタップすると表示してくれます。
ただし、どうも触ってみた感じだとhttpsページでは反応してくれない模様。。。

Appを使って知る

iSource

iSource Browser

iSource Browser

  • Gamu apps
  • ユーティリティ
  • 無料

HTMLソースはもちろん、コンソールやHTTPヘッダーの中身まで見ることができる無料のアプリ。
URL欄にキーワードを入れて検索することも可能です。シンプルで使いやすい。
サッと確認する程度ならこれくらいで十分ですね。

ScriptBrowserPlus

ScriptBrowserPlus

ScriptBrowserPlus

  • UNI-LABO Co.,Ltd.
  • ユーティリティ
  • 無料

無料でおすすめしたいのはこのアプリです。
ソース表示以外にも色々な機能がありアレコレ知りたい試したい人には便利(ソースコードテストもできるのは素晴らしい)
ただし残念ながらiOS11では動作対応していない模様。。。残念(;;)

View Source

View Source – HTML, JavaScript and CSS

View Source – HTML, JavaScript and CSS

  • Paul Hudson
  • ユーティリティ
  • ¥120

有料ですが個人的に一番使いやすいのがこれです。
Safariの共有メニューからこのアプリを呼び出せるのはめちゃくちゃ大きい。
DOM階層やページに含まれるアセットを見れるのも便利です。

最後に

謎のテンションで一気に調べて一気に検証して一気に書き上げた記事なので、誤りや間違いがあったり「こんな秘密兵器もあるんだぜ。。。」というのがあればコメント等頂けると幸いですm(_ _)m

【勉強会ノート】2017/11/18開催「HTML5感」での勉強会メモ

どうもです。最近めちゃくちゃ焼肉が食べたいです。

今回はLPI-JAPAN主催のイベント「HTML5感。」に参加してきました。

▷イベントページ
html5exam.jp

HTML5認定試験を行なっているLPIさんの勉強会なので気になって参加してみましたが、
行ってみた感想としてはWebフロント勉強し始めの人にとってもフロント技術駆使して色々やってみたい人にとっても盛りだくさん!な内容だったんじゃないかなと思います。
(あとマスコットキャラクターのセマンくんが可愛かった)

んで今回の勉強会で新しく学んだことの復習として
今回受けてきたセッションの概要と、そこで出てきたこれはチェックしておいた方がいい知識、技術を自分用のメモとしてまとめたいと思います。

HTML5~JavaScriptの応用例と学び方(山崎大助さん)

まずはじめの基調講演として山崎大助さんは「Webの領域ってそもそもどういうことをやっているのか」や「Web言語をどう学ぶか、学んだ言語をどう活かして行くか」をベースにしたWebフロント入門者から中級者以上向けのお話をしてくださいました。
山崎さんが主催しているジーズアカデミーでの学びの活かし方を事例に挙げながら、最近のアプリについての特徴等もお話してくださったので、個人的な感想として「Webアプリ、簡単なものでもいいから作ろう」とモチベが刺激されました。個人的に今日一番面白いと思った講演でした。
そんな山崎さんのお話の中で私がチェックしたことはこちら。

PHPはじめてのフレームワーク

はじめに山崎さんの著書等の紹介があったんですけど
その中でPHPフレームワーク入門として紹介していたのがこれです。
これ、なんで私が注目したかと言うと、Amazon Unlimitedに加入している人なら無料で読めるとのことです。
ちょうど今私PHPの基本を一通りやって次もうちょっと難しいのやりたいなと思っていたところだったので
これを機にAmazon Unlimitedに加入しようか。。。と心が大きく揺れた瞬間でした。。。

ブラウザ上で使えるJavascriptエディタ Ace

Ace - The High Performance Code Editor for the Web

プログラムの内容の中に「最近のオススメのエディターは?」と言う項目があったので
ちょうどDWやBrackets以外に何かいいエディタないかなあと思っていたので「あ、最近のエディタについての話かな?」と思ったら
「エディタを自分で作ろう!」と言うお話でした。
エンジニアの「いいものがないなら自分で改造してしまえ!」気質、やっぱり好き。(なので相変わらずエンジニア周りから離れられない)
んでご紹介にあったAceはブラウザ上で動く上に自分で好きなようにカスタマイズ可能な代物らしく、山崎さんはこれを使ってBootstrap用のエディタを自分で作った!とのことでした。(私の周りにいた方も興味があるらしく「すげえ・・・」と小声が聞こえてきたほどでした)
www.venezia-works.com


▷個人的参考URL
qiita.com

開発を促進させる諸々---FireBase/画像認識API

コンテンツファーストの時代だから、思いついたら誰よりも早く作るのが勝ちであり価値である、ということで
実際にアプリ制作でも使えるBassやWebAPIの紹介もありました。

◾️Firebase
firebase.google.com

Baasとして紹介があったのはFireBase。
私これ知らなかったんですけど、みた限りなんだか色々すごく便利そうですね。。。
始める前にさっと読むのに良さそうな記事があったので一緒にメモ。

▷個人的参考URL
qiita.com

◾️画像認識API
Microsoft
azure.microsoft.com

IBM
www.ibm.com

今回私が特に気になったのが、画像認識API
画像認識APIはアプリでも取り入れやすいものが多く、特徴として読み取ったデータをJSON化して書き出せると言うことなので俄然興味が湧きました。
各種APIの比較としてはこの記事が参考になるかなあと思ったのでメモしときます。

▷個人的参考URL
qiita.com

上記で紹介した数々のAPIにみられるように、今は色々なAPIが公開されています。
逆に言うと個人でもそれなりの機能を備えたものは作ろうと思えば作れるわけなので
これらをうまく取り入れたアイディア力が新しいWebアプリやサービス制作においてカギとなる、と言うことで
ジーズアカデミーでは必ず授業の中に何か一個小さいものでもWebアプリを作るようにしているとのこと。
プログラミング言語は基本的に一個理解すれば他の言語に応用して考え方を持って行くことが可能なので、
まず初心者は何か一つの言語の基本をしっかりやり、そこから他のものを広げて行く方が幅が広がるとのことでした。
自分の尖ったところをまず1つ磨く。最近色々目移りしがちな私の頭にガツンときた気がしました。。。

長期Webサービス受託開発こう困ったのでこうした(高津戸 壮さん)

先日参加したCSS Niteでも登壇されていたところをお見かけしたピクセルグリッドの高津戸さん。
今回の勉強会ではサービス受託開発でのご自身が経験したことやそこで使ったツール、サービス開発と捕手での心構えなどを交えたお話をしてくださいました。
この話は聞いていて一番「わかる。。。(涙目)」なポイントてんこ盛りでした(現に私がWebサービスの開発と保守両方経験している人間のため)
そんな中で私がチェックしたのはこちら。

構文チェック/ ツール

jshint.com

circleci.com

講演の中で紹介されていた構文チェックツールです。JSHintはjavascriptのフォーマット不整合や構文のおかしなところをチェックしてくれるツール、CircleUIはビルド、テストを自動で行い、設定すればそのレポート通知までしてくれるツールだそうです。
それぞれ入門に良さげな資料を探してみましたが、JSHintの場合他にも色々なJavascript構文ツールがあるようで、今回は比較記事で他にどういうものがあるのかを一緒に見れたらいいかなと思ったのでメモ。

▷個人的参考URL
www.tam-tam.co.jp

www.slideshare.net

プロジェクト管理:かんばん方式

カンバン: ソフトウェア開発の変革

カンバン: ソフトウェア開発の変革

この考え方私は知らなかったんですが、Trelloを個人で使っているのでそいつの具体的な活用方法としてこの考え方を導入すると相性がいいのかなと思いました。
高津戸さんのプロジェクトではクライアントから来た要件を整理しながらかつ作業者がすぐに着手しやすいように整理するために「要望、要件定義、着手可能、実装済」とボードを区切ってタスク整理をしていたそうです。(そもそもかんばん方式の使い方がこのセオリーとのこと)

▷個人的参考URL
ソフト開発に「かんばん方式」を導入すべき理由とスクラムとの違い - WPJ

AR for HTML5(須山 陽一さん)

ブラウザ上で今後ARを実装していくにあたってのサンプルを示してくださったのが須山さん。ちょうど私が興味を持っていた分野だったのでお話で出て来た技術をチェック。

ARフレームワーク---AR.js

github.com
ARを手軽に実装するためのライブラリとして紹介されたのがこのAR.jsです。セキュリティ上の観点からHTTPS通信でなければ動いてくれない点に注意です。
入門記事等探してみましたが、結構色々ありそうです。

▷個人的参考URL
getar.jp

Web上で軽快に動作するオープンソースのARツール「AR.js」とは何か? | Tech2GO

VR用フレームワーク--A-FRAME

aframe.io

そしてVRフレームワークの紹介も。Mozillaが開発したVRフレームワークのA-FRAMEがお手軽でお勧めとのことで今回のデモではAR.jsと組み合わせた活用例を披露してくれました。最近iOSSafariでもAR.jsを使った表現ができるようにになったので、今後この組み合わせでの開発が増えるのではとのことでした。

▷個人的参考URL
qiita.com

www.webprofessional.jp

qiita.com

AR用ライブラリ--ARToolKit / ArUco

Open Source Augmented Reality SDK | ARToolKit.org

ArUco: a minimal library for Augmented Reality applications based on OpenCV | Aplicaciones de la Visión Artificial

AR用のライブラリとして紹介されていたのがこの二つ。ARToolKitC言語、ArUcoはC++ベースのライブラリだそうです。ブラウザ上で利用するにあたっては、ブラウザで動かせるようにコンパイラを別途かます必要があるとのことです。まずはAR.jsを触れてみて、そのあとこのライブラリにチャレンジ、という感じかなと思いました。

▷個人的参考URL
「攻殻機動隊」「電脳コイル」の世界を実現! - ARToolKitを使った拡張現実感プログラミング - 工学ナビ

qiita.com

tips.hecomi.com

CreateJSでつくるインタラクティブなコンテンツ(野中 文雄さん)

WebでのARの話を聞いたのでこれも聞いておこうと思い野中さんの講演も聞いて来ました。

CreateJS

createjs.com

Flashライクなことを今後行いたいのであればHTML5Canvas機能とCreateJSを組み合わせれば大体のことは楽しくできるということ。すごい。
野中さんが過去にgihyo.jpで公開した連載記事が導入編として挙げられていましたので、これと併用して他のCreateJS入門記事を読むと学習しやすそうな印象です。

▷個人的参考URL
gihyo.jp

CreateJS入門サイト - ICS MEDIA

まとめ

そんなわけで内容の濃いセッションづくしでお腹いっぱいになれました!APIを利用したWebアプリ開発は実際に作ってみたいなと考えていたことのヒントになったのでちょとチャレンジしてみたいなと思います。あとはCreateJS楽しそう。
そして今回ラッキーなことに大抽選大会でセマンくんの携帯ストラップ当たりました。やったあ。

【勉強会ノート】マーケティングデザイン論勉強会に行って学んだ事と、自分なりに学び考えた事をまとめてみる

f:id:mio_U_M:20171112183110j:plain

どうもです。めちゃくちゃ久しぶりにブログ更新します。

先月のことになりますが、10月29日に都内にて行われたデザイン系勉強会「初心者歓迎!マーケティング+デザインで「伝わる伝える」考え方を知ろう!」に行ってきました。

▽イベントページ
https://atnd.org/events/91662?kme=clicked%2Bevent%2Bremind%2Bmail_url

もともと大学時代にポスターデザイン史やウェブ広告という、いわゆる「商業美術」を勉強、研究した結果「ただ美しいだけじゃなくて、ちゃんと機能性や商業価値を考慮したデザインをもっと学んだり試してみたりしたいなあ」と思っていた私にとって「この勉強会はタイトルからしてまさに求めていたものだ!」と思い即決で参加したこの勉強会。講師はCSS Niteでもご登壇経験のあるデザイナー/ディレクターのたじまちはるさん(@DesignHumore)ということで、現場でご活躍されているデザイナーさんからみたマーケティングとデザインの掛け合わせとは一体どういったものだろう?とわくわくしながら参加しました。

結論から言うと
「ほんとに参加してよかった!」
「今日学んだことをもとに、もっとマーケティングやデザインを追求しよう!」
と心の底から思いました。
思わず個人的にマーケティングについて勉強し始めてみたほどです。

なので今回は、たじまさんの勉強会で学んだこと+自分で個人的に学んだこと、感じたことを(放っておくとすぐに忘れるトリ頭な)自分用のまとめとして残したいと思います。

マーケティングとデザインをつなぐキーワード
「See Tnink Wonder」

今回のたじまさんの講義でのキーワードはこれでした。

「See Tnink Wonder」
(よく見て よく考え 魔法を起こす!)

マーケティングと出会いを繋げる思考の可視化」のプロセス、というサブタイトルで掲げられたキーワード。最初にこれだけ聞くと「どういうことだ?」となりますが、結論から先に言うと次のような意味でした。

  • Seeは商品を売り出そうとしている環境や相手を知ること
  • Thinkはその商品をどういった方向性、内容で売り出すかを考えるということ
  • Wonderは売りたい商品・サービス、その商品の販売戦略のために何をデザインするか、どういった技術で落とし込むかということ

マーケティングとデザインが両立して生み出された商品やサービスはこの3つのプロセスがちゃんと存在している、というのが全体を通してたじまさんが伝えたかったことだと私は解釈しました。

マーケティングって、そもそも何?

まず初めにそもそもマーケティングとは何か?について。たじまさんはドラッガーコトラーの名言を用いつつ紹介してくださいましたが、まとめるとこの一言に集約するとのことでした。

「もの・サービスの価値を理解したうえで、
 必要とする人へ選んでもらうように届ける」

世の中は需要と供給であふれています。でもただ単に売りたい人が売りたいものを売るだけで必要とする人がやってくるわけではないです。では必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?そのために大切なプロセスが「See Tnink Wonder」の3ステップなのです。

Seeは事実以上に相手の世界を理解すること

必要とする人に自分の商品やサービスが届くためにはどうしたらいいか?その目的を達成するためにまず取り掛かるべきことは「事実以上に相手の世界を理解する」ということです。
ここでいう「相手の世界」とは何かというと…

・商品の競合他社
・顧客の特色、行動心理
・顧客の置かれている状況
・クライアントの商品を売ろうとしている場所

などなどです。

マーケティングの話を持ち出すとき、競合他社や販売される場所(市場)を調査することは当たり前のように話の引き合いに出てきます。また、最近マーケティングの用語としてよく聞くペルソナやカスタマージャーニーなどは、顧客の行動や心理を理解するための考え方や手法の一つとして提示されていますよね。「この人は必ずこういう商品・サービスが欲しいと思うはずだ!」という推測をもって作って見ても、いざユーザーテストをやってみるとこっちが思っている以上にあれこのユーザーはこの商品・サービスを必要としていない…?と期待外れになることがあります。そういった市場や顧客を行動や動向も含めて具体的に検証や調査を行い、商品周りについてのひとつ一つの理解を積み重ねる行為。それがSeeの部分ということです。

Thinkは商品やサービスを理解し戦略を練ること

売りたいものはある!どういう市場でどういう顧客がいるかも知った!という段階に来た時に、次に取り掛かるのは「商品をその市場や顧客に対してどう売って行くかを考える」ということです。
具体的にどういうことを考えるかというと…

・ 広告媒体は?
・どういうブランディングにする?
・販売活動はどうやってやる?
・ターゲットユーザーに届くようにするには?

などなどです。

ここで重要なのは「そもそもこの商品やサービスってどんなものか」を理解する、ということです。競合他社や市場の流れ、ユーザーなどについての情報をSeeのプロセスで洗い出したのなら、「その中でこの商品の特別なポイントは何か?」「何をコンセプトとしてこの商品を作ったのか?」を出発点として商品戦略を展開していくのがThinkのプロセスなのです。逆に言えば、この「そもそもこの商品やサービスってどんなものか」がなければ、商品の方向性や戦略がブレてしまいます。また、後述する実例のプロセスでも「なぜそのデザインになったか」の前に必ず「そもそもこの商品やサービスってどんなもの?」の理解が前提としてあることが見受けられます。SeeとThinkの過程で得た情報や考え出した戦略がWonderのタネとなるのです。

Wonderは売りたい商品・サービス、その戦略を効果的に魅せること

そしてここで製品を具体的にどういう形にするか、というのがWonderのステップです。
売りたいものと、売りたいものの戦略を実現するために必要なのがデザインの力。ここで初めて具体的なヴィジュアルの話をするから、デザイナーの出番やっと登場だぜ!というケースが多いかもしれません。ですが、マーケティングデザイン論の文脈で言えば、SeeやThinkで揃った情報と戦略を繋げて最終的な成果物に落とし込むというプロセスなので、本来ならばSeeやThinkの過程からデザイナーが加わっていることが望ましいのでしょう。商品のパッケージも宣伝媒体も、効果的なものを打ち出すにはマーケティングやデザインと繋げて考えると成功率が上がる。それならば、上の方の過程から見通せている状態で制作に取りかかることが一番ベスト!ということを私自身は感じました。
(実際にデザイナーとして現場に関わった経験がないので、ここら辺の話はたじまさんのお話や自分の勉強を通して感じたことです。デザイナーとしてそういう現場に関わってみたい…!)

Wikipedia先生を見てみると構造がわかりやすいよ

実際にこのマーケティングとデザインがつながっている構造をみるにはWikiをみると良いですよ〜ということでググってみると、なるほど確かにページ右端のところにある概要説明バーに3つの構造が書いてあります。

マーケティング - Wikipedia

◆要約するとこんな感じ
・主要概念 → 商品を売り出そうとしている環境や相手を知る(See)
・宣伝内容 → 商品をどういった方向性、内容で売り出すかを考える(Think)
・宣伝媒体 → 売りたい商品・サービス、その商品の販売戦略のためにデザイン、技術をどう用いるか考える(Wonder)

こうしてみると、マーケティングの目的を達成するには、「市場調査や商品戦略はしっかりやってるけど、その良さを伝えるデザインはまあよしなに」なことにしても意味がないし、「このメディア媒体や技術は流行りだから市場調査とか戦略とかろくにしなくても売れる!」という考えも通用しないということが見えてきます。

実例で見る!「See Tnink Wonder」

売れる商品、よくできているサービスはちゃんとSee Think Wonderの3ステップがある。実際にたじまさんが紹介してくれた例から考えてみます。

実例1:明治 おいしい牛乳

See
・世の中の牛乳に対するイメージとは?
雪印の食中毒問題で、健康的でないイメージが強くなっていた…

・人々が牛乳の嫌いな原因とは?
→牛乳の臭みが嫌われる原因。
→成分テストをした結果、牛乳が酸化することで臭みが発生することが発覚
→牛乳から酸素を抜くことで、新鮮で臭くない牛乳に!

Think
・ネーミングはどうする?
→流行りのネーミングスタイルよりも、こだわったことをそのままストレートに表す!

・家庭で選ばれる牛乳のパッケージの色は?
→消費者テストをした結果、スーパーなどで目を引く赤色より、
 家庭の朝食風景に馴染む青の方が好まれることがわかった!

・スーパーや店頭で選ばれる場合何を意識したら目につきやすい?
→商品陳列におけるゴールデンゾーン(=自然と目に入りやすい位置。人の少し下向き気味の目線位置)を意識すると届きやすい

Wonder
・おいしさを表現するためのパッケージの絵柄は?
→今までの牛乳パッケージにあるような牧場や牛のイラストを使用せずに、
 グラスに注がれた牛乳の写真を使って、美味しさと新鮮さをアピール

・ゴールデンゾーンに商品を配置するにあたって各部位をどう見せるか
→注ぎ口は商品名が目立つような配置に、
 本体部分は商品名と牛乳の写真が目立つような縦型レイアウト、
 商品下部は、陳列棚の支えが被さることを考慮して、
 商品説明や商品名が入り込んでしまわないように調整

・おいしい牛乳が一つのブランドとして長く愛されるためには
→パッケージ上部にアーチ状の装飾を拵え、
 そのアーチ状の装飾を他の場所でも展開し、
「青色アーチ=おいしい牛乳」を想起させるようにした!
(ブランド関連の招待状のデザインにアーチ状の飾りを取り入れる、など)

今や牛乳の主要ブランドの一つとなっている明治おいしい牛乳。15年前までは牛乳といえば雪印、というイメージが強かった時代があったことをご存知ですか?雪印は不正と食中毒問題で一気に人気が暴落し、それに変わって人気ブランドとなった明治おいしい牛乳。人気になったわけは、徹底して人に向き合い、普通に選ばれる牛乳を目指したこと。このパッケージを担当した佐藤卓さんは、売場における子供や高齢者の目線まで考えたうえでフォントの位置もミリ単位で調整したそうです。それらも全て、人々に普遍的な牛乳として選ばれるための工夫。デザイナーの仕事の真髄を感じられる一例です。

実例2:三菱地所グループカード販促キャンペーン

See
・そもそも依頼主のクレジットカードはどういうものなのか?
→クライアントのサイトをみて、より詳細な情報を収集

・カードに対するお客様の評価は?
→口コミ(知恵袋やSNSなど)を調査

・他社と比較してポイント交換レートはどんな感じ?
→比較評価やポイント交換比較サイトなども調査

・実際にお店の人が案内している現場はどんな感じ?
→実際に店舗に行ったり、案内の現場をみたり、リーフレットを実際に取ったり…

Think
・他と比べて魅力的に見せるためには?
→良さを一言でまとめることで、訴求力を増すようにする!
→様々なサービスや特典を満喫できることが伝わるフレーズに集約

・ただのお客様へのパンフレットとしての役割以上にするには?
→販促現場で、店員さんがパンフレットを利用して説明を行なっていたことから、
 お客様に取ってわかりやすい機能はもちろん、
 店員さんに取っても説明しやすい機能も備えたものとして制作する!

Wonder
・良さを伝えるためにどうデザインに落とし込む?
→どういう風に使えるか、実際のシュミレーションや使用例を示す
(ポイント交換シュミレーション例を示す、会員の特典の具体例を示す、などなど)
 →実際にお客さんに伝わるかどうかを確認!

・お客様にとっても店員さんにとっても最適なリーフレットとは?
→お客様視点からの疑問や質問などを集めたQ&A集を記載
 =店員にとってはお客様に説明しやすくかつ魅力を伝えるためのツールとなる!
→カードと同じ形のリーフレットにすることで、
 何のパンフレットかわかりやすくかつ持ち運びしやすくなる


これは実際にたじまさんが関わったプロジェクトのお話です。三菱池所グループカード(クレジットカード)の契約数を伸ばすための販促手段を刷新してほしいという依頼で、最終的に反則パンフレットのデザインを刷新した例です。最初企画概要がコピー用紙一枚でポイント数とキャンペーン内容のみしか書いていなかったという情報の少ない依頼の中、「見た目は仕組みが作る」という考えの元、サービス内容、カードの販促現場の実態、評判の調査を積み重ね、最終的に「お客様にわかりやすいパンフレット」としての機能だけでなく「カードを販促する店員が実際にお客様に説明する際に助けとなるパンフレット」という二つの機能を備えたものに昇華させたそうです。実際に講義の中でそのパンフレットを見せてもらいましたが、パッとみただけでわかりやすいのはもちろん、店員さんの説明の助けになる部分は裏面に記載して表裏で役割を分けるという工夫もこしらえていました。よく考えられているデザインを見ると発見が多いので勉強になる上にみていて楽しいです…

たじまさんのお話から私なりに3つに分類してみましたが、「あれこれってThinkじゃなくてWonderなのでは?」とか「SeeというかThinkなのでは?」というものもあるかもしれません。というのも、実際のところうまくこの3つのステップがつながっているものほど厳密に分けるのが難しいというのがあります。最初から市場調査の結果や戦略やデザインが一本軸でつながっている前提のプロジェクトは、そもそもデザインにもちゃんとした意図が組み込まれているものが仕上がっているし、戦略を練る段階でパッケージや広告などデザインの領域に入っているということなのでしょう。

個人的に思ったことまとめ

ここからはマーケティングデザイン論の導入部分を学んでみて個人的に感じたことを書き記して置こうと思います。基本的に私の個人的な感想なので「マーケティング以外の話は興味ないんで!」って方はここら辺からページ離脱してください。

マーケティングって「おもてなし」!

この講義を聞いて一番感じたことです。
マーケティングとデザインを掛け合わせた実例を聴きながら、成功するマーケティングの条件の根底にはお客様に対する「おもてなし」の心があるんだと感じました。
そしてデザインにそういったマーケティング的考え方を持ち込むと言うことは、クライアントがターゲットとしているお客様に対してのおもてなしの心はもちろん、クライアントに対してもおもてなしをしているということになります。

マーケティング + デザイン」な考え方のデザイナーは
物を売りたい企業と、物を欲しいと思うお客様に対して、とっても「おもてなし」をしている!

この姿勢、私はとても共感しました…
もともと私は、友達の誕生日プレゼント考えたり選んだりするの好きな人間で、「せっかく渡すなら、その人が本当に欲しいものをプレゼントしたい!」と考えているので、誕生日を迎えようとしている友達が何を必要としているのか注意して会話をしたり、その子の持ち物や行動をみながら「こういうプレゼントなら今必要としているのではないかな?」と推測して、友達にプレゼントを渡すということをしているんです。その結果「これ好き!」「ちょうど新しいのが欲しいと思ってた!」と喜んでもらえてプレゼントを使ってもらう様子を見たときの達成感や喜びは、半端ないことこの上なし。たじまさんの言葉を借りると、「その人のことをよく見て、その人のことをよく考えて、結果その人にWonderな体験をしてもらう」ということがしたかったんでしょうね。なので私にはとても合うデザイン思考だなと感じました。

こういうデザインをやりたいんだ!と気づかせてくれた

個人的な話をすると、私はちょうど転職活動中の身でして、この勉強会に参加する前、ちょっと自信無くして落ち込みかけていた状態だったのです。
というのも、転職活動と並行して色々な交流会に参加しており、その中で業界のお話や実際にデザイナーとして活動している方とお話しした結果「スキルや経験が全然追いついてないのにデザイナーとして転身しようとしている私は、一体何を信念にして活動しようとしているんだ?」とぐるぐるぐるぐるドツボにハマってたのです。
ですが、この講義を聞いたことで「そうだ、私はこういうことをやってみたいのか。そのためだったらスキルやら経験やら何でもキャッチアップして前進しよう!!!」と元気をもらえたのです。結局のところ「好きすきやってみたい!」という気持ちがあれば経験とかスキルとかは気持ちの強さで何とかできると思い出したんです。
元々私は文系出身でSEをやっているんですけど、今まで何とかやって来れたのって「設計考えるのって面白い要素あるな」「プログラミングって学べば学ぶほどもっと色々とやってみたくなるな」という「すきすきやってみたい!」精神があったからなんです。なので何かをはじめる際に必要なものってエンジンとなる自分の軸(「すきすきやってみたい!」精神)だけなんです。
ちょうど私は様々な情報に圧倒されてしまって、デザイナーを目指すに当たってそこの自分の軸を見失っていました。スピードがでない車のように自信消失低速モードだった私を、「やってやる!」な爆速モードに戻してくれたたじまさんの今回の講義にはとても感謝の気持ちでいっぱいです。


私の与太話が入ったせいでだいぶん記事長くなってしまいましたが。。。
とても刺激になった講義でしたので、備忘録として執筆しました。
もっとこの分野について知りたいことも色々あるので、さらに個人的に勉強しつつ、私自身もこういうことをやるデザイナーになれるように行動していこうと思います。

最後に、今回の講義はもちろん、記事執筆にあたって公開の許可や協力をいただいたたじまちはるさんには心の底から感謝です!
マーケティングとデザインをつなぐことの面白さ、教えていただきほんとうにありがとうございました!

【Dreamweaver】スニペットが一時期流行ったポストペットの新しいサービスか何かと勘違いするくらいわかっていない人向けのスニペット解説

「そんなやついるわけねえだろ?!?!」と思ったあなた、

今まさに目の前にそんなこと考えた人間がいますので目を疑わないでください。

Webデザイン系の記事を読んでいて出会った言葉なんですけど

「あれかな?CSSアニメーションとかPHPとか駆使してメッセージ送るイマドキなポストペット????」

とかちんぷんかんぷんが足生えて歩いているようなこと出会った当初考えてた自分を

我ながらぶん殴りたいくらいです。今まさに。

 

スニペットソースコードのあんちょこメモ!

さてさて本題。

コーディングを行っているときって、結構自分がよく使うお決まりの定型文だったり、よく使うライブラリだったりをまた使いたいときに

「あれ…前ってどう書いたっけ…」と前に書いたソースを探しては時間を浪費し、やっと見つかったときには結構な時間かかってたアアアアってこと、あるんじゃないかと思います。

(実際SEやってると死ぬほどあります(白目))

 

そんなときにあらかじめよく使うコードや定型文を保存しておいて、いざというときにすぐに取り出せるようにする、それがスニペットなのです。

(仕事でソースいじってるくせに知らなかったとは何事かと思うでしょうけどそれくらいでもSEやってますほんますいません)

 

Dreamweaverスニペットを登録してみる

言葉ばかりの説明ではわかりにくいのでとにかく実践あるのみ。

というわけで普段よくお世話になっているDreamweaverCS6でスニペットを登録してみました。

 

①「ウィンドウ」>「スニペット」(ショートカット:Shift+F9)を選択

f:id:mio_U_M:20161027235658j:plain

 

デフォルト設定のままのワークスペースであれば左下の方にスニペットウィンドウが表示されます。

 

スニペットウィンドウから「新規スニペット」を選択

f:id:mio_U_M:20161027235706j:plain

 

※これを選択する際、あらかじめスニペット一覧のどの階層に設定しておきたいか選んでおくと楽です

 

③「スニペット」ダイアログが開いたら、登録したいスニペットの情報を記入

f:id:mio_U_M:20161027235732j:plain

 

④「OK」をクリックすると、設定したスニペットが登録されます

f:id:mio_U_M:20170227220320j:plain

 

ね、簡単でしょ( ͡° ͜ʖ ͡°)

あとは必要な時にスニペットを呼び出せば良いので

CSSなどで長〜い定型文(clearfix用のCSSなどを私は登録してます)などをいちいち打ち込む手間が省けます。

 

Dreamweaverで登録したスニペットにショートカットを割り当てる

せっかく登録したスニペット

でもいちいちクリックでウィンドウカチカチして呼び出すよりも

ショートカットに覚え込ませてサクッと取り出すのが一番の作業短縮ですよね。

というわけで、さっき登録したスニペットをショートカットキーに割り当てます。

 

①編集>キーボードショートカットを選択する

f:id:mio_U_M:20161027235730j:plain

 

②キーボードショートカットダイアログを開いたら、コマンドから「スニペット」を選択し、ショートカットを割り当てたいスニペットを選択、+ボタンをクリックする

f:id:mio_U_M:20161027235733j:plain

f:id:mio_U_M:20170227220911p:plain

 

 ※注意!

上の状態でスニペットにキーを割り当てようとすると以下のようなダイアログが現れます。

これは何かと言うと、現在のアセットが「Dreamweaver Default」を選択して変えようとしていることに対する警告です。

f:id:mio_U_M:20170227220943j:plain

Dreamweaver Default」のアセットは変更することができないので、キーボードショートカットを割り当てる際は自分のオリジナルアセットとして割り当てる必要があるのです。

こんな時は焦らずに、上記ダイアログのOKを押してオリジナルアセットの名前を決定し、新しいアセットとして登録してしまいましょう。

f:id:mio_U_M:20170227220952j:plain

 そうすると、もともと選択していた「Dreamweaver Default」をベースとして新しいアセットが保存されます。この状態で+ボタンをクリックしましょう。

f:id:mio_U_M:20170227221441j:plain

 

④割り当てたいキーを入力する

例えばCtrl +/ に登録したい場合は、カーソルがフォーカス当たってるのを確認してCtrlと/を同時押しすれば良いです。読み取ってくれます。

f:id:mio_U_M:20170227221454j:plain

 内容に問題がなければOKを押して、登録完了です。

f:id:mio_U_M:20161028000606j:plain

うん、eclipseJavaいじってる時と感覚が同じになった。やったね。 

 

そんな感じで、スニペットはゴリゴリコードを書くにつれて不可欠となってくるので

「これを何回も書くのはどう考えても時間の無駄無駄無駄アアア」と思ったものはポイポイ登録して

「これを何回もスニペットから呼び出すのはどう考えても体力の無駄無駄無駄アアア」と思ったものはショートカットも一緒にしちゃえば良いのです。

CSSJavascriptとか書く時に重宝しそうですね。

 

[今回お世話になったサイト]

参考にさせてもらいました。ありがとうございます!

webnaut.jp

delaymania.com

【自分用メモ】Photoshopの「知らなかったこんな技!」をまとめるための記事【随時更新】

昨年末から本腰入れてWebデザインの勉強を始めて分かったことは

「私Photoshop使いこなせてないわ(泣)」の一言に尽きました。

そんなわけで、この記事は私が「知らなかった!」と思ったPhotoshopの技について備忘録的に残していくために置いておきます。

なので知らないことがまた出てきたらこの記事更新します。

 

切り抜きツール / 指定した縦横のサイズで画像を切り抜く

実を言うと切抜きツールの存在自体知らなかったんですが(オイ)

ハンドルを動かしてメモリ見ながら欲しいサイズを取ってくる、と言う風に最初はやっていたんですが

優秀なPhotoshopなんだから値を指定してとってくることができるはず!と思って調べてみたらやっぱりできました。

f:id:mio_U_M:20170222011740j:plain

切抜きツール(ショートカットキー:C)を選択すると、数値を入力できる二つのボックスが現れます。例えばここに「500px × 200px」指定で切り取りをやってみます。

f:id:mio_U_M:20170222011907j:plain

f:id:mio_U_M:20170222011921j:plain

数値を入力した段階でプレビューが表示されるので、問題なければそのままEnterキーで確定します。簡単でしたね。

ちなみに、上記の画像では単位も一緒に入れて指定しましたが、

これが単位指定無しで行うと、比率で切り取ると認識してくれます。

f:id:mio_U_M:20170222012012j:plain

 

※補足:切り抜くときに選択外の領域を残したいとき

上記の手順では、この切抜き操作を行うと領域外の箇所はばっすりなくなってしまう操作です。

そうではなく、領域外は残したまま指定の切り取りを行いたい場合は単純に

「切り抜いたピクセルを削除」のチェックを外してやればよいのです。

f:id:mio_U_M:20170222012236j:plain

この状態で切り取りを行った後、移動ツールで画像を動かしてみると

ちゃんと領域外の画像も残っていることが確認できます。

f:id:mio_U_M:20170222012320j:plain

f:id:mio_U_M:20170222012412j:plain

 

【Photoshop】画像補正で使うであろう機能をまとめてみた

どうもです。

最近買ったNothing's Curved In StoneのアルバムExistenceがすばらしく名盤すぎて生きるのが辛いです。

今日は画像補正する際に使われるであろう機能の二つ「色調補正レイヤー」と「画像修復系ツール」について学んだので

記憶が冷めやらないうちにまとめようと思います。

画像補正、ちょうどバナー作りの時にフリー素材をうまいこと加工するのに苦しんだので、ちゃんと覚えておこうと思います…

 

色調補正レイヤー

Photoshopの色調補正レイヤーは動かせばわかるんですけどありがたいくらい色々昨日あります。

ありすぎて「どいつをつかえばええんや!!!!(怒)」とさじを文投げたくなるくらいです(褒めてる)

ここでは三つ、よく使う&結構使えるレイヤーをご紹介。

 

明るさ・コントラスト

f:id:mio_U_M:20170220000644j:plain

 一番お手軽な補正レイヤーはコイツじゃないでしょうか。

明るさは読んでのとおり明暗の調整です。

コントラストは暗いところは暗く、明るいところは明るくする度合いを調整します。簡単に言うとどれだけ明暗はっきりさせるかの度合いの調整です。

f:id:mio_U_M:20170220000645j:plain

f:id:mio_U_M:20170220000644j:plain

明るさを上げると全体的に明るくしてくれるのはいいんですが、輪郭がぼやけて逆に見えにくくなるので、明るさを上げたときはコントラストも一緒に調整すると綺麗にできます。

 

レベル補正

f:id:mio_U_M:20170220000647j:plain

 

指定したモードのハイライト、シャドウ、中間色のレベルを調整します。

説明するより画像で見たもらったほうが早いので実際に動かした物を上げていきます。

 

f:id:mio_U_M:20170220000648j:plain

白矢印(ハイライト)を左にぐーーっと寄せますと、その分画像全体が明るくなります。またこうすることでグラフ下にある三つの数値のうち一番右側の値が減少します。

つまり一番右にあるのがハイライトの度合いで、一番右にあるときは初期値255なのですが、左に矢印を持ってきてやるとハイライトの上限値が低くなるので、他の矢印をいじらない限りはすぐに明るくなる、という理屈です。

こうすることで一気に画像がふぁんしぃになります。アラ素敵。

 

f:id:mio_U_M:20170220000649j:plain

逆に一番左にあるのがシャドウの度合いなので、今度はコイツを右にぐーーっと持ってきてやると、グラフ下の一番左の値が上昇し、シャドウの下限値が高まるので、他の値をいじらない限りはすぐに暗くなりやすくなる、ということです。

こうすることで一気に画像がゴシックダークになります。アラ素敵。

f:id:mio_U_M:20170220000650j:plain

中間色はハイライトとシャドウの比率の調整です。真ん中にあるときは半分ずつ、ですが、真ん中のグレーの矢印を右に動かせばシャドウの比率が高まるため全体的に暗さ成分が増え、左にやるとハイライトの比率が高まるので全体的に明るさ成分が増える、と言うわけです。

f:id:mio_U_M:20170220000652j:plain

f:id:mio_U_M:20170220000653j:plain

モードはRGB、レッド、ブルー、グリーンとあり、単色ずつのモードで選ぶとその選んだモードの色味成分を調整することができます。画像はレッドを選んだ場合ですが、白矢印をいじると赤みの強さを調整でき、黒矢印をいじると赤みの反対色である緑みを調整できます。

トーンカーブ

f:id:mio_U_M:20170220000654j:plain

レベル補正と似てますがこっちの方がより詳細に調整できます。

これも動かしてみたほうが早いので画像あげていきます。

 

f:id:mio_U_M:20170220000655j:plain

トーンカーブの初期値は直線グラフなのですが、こいつが下の方にカーブすると指定したモードの色合いを低くし、上によるとしてい下モードの色合いを高くします。

RGBの場合だと明るさの調整と同じなので、下に行くと暗く、上に行くと明るくなります。

f:id:mio_U_M:20170220000656j:plain

f:id:mio_U_M:20170220000657j:plain

 

このトーンカーブ、戦場をクリックすることでカーブの制御点を増やすことができ、より複雑なカーブを描くことが可能です。そうすることで独特の色合いを表現することができます。

(制御点複数の場合はどう扱うとどうなるか、というのは私も実はまだ探り探りの状態なので、こいつは自分で探って最適な色合いを出すのを探してもらうのが早いです…説明頼りなくてスイマセン…)

 

f:id:mio_U_M:20170220003821j:plain

 

画像修復系ツール

いざWebページに使うにはちょっと…とためらうようなものが写っていたり、

これさえなければ最高の眺めなのに!という画像、あるあるですよね。

大丈夫、Photoshopさん優秀だから。

というわけで用意した画像が余計なモン入ってて素材として使えねえ!を余計なもののないまさに理想の画像!に変えるためのツールを紹介します。

 

コピースタンプツール

名前の通り、選択した領域をコピーしてそれをスタンプみたくペタペタやるのがこのツールです。

画像で消したいものの近辺の色やものをとって消してなじませていくのが基本的なやり方です。

 

実際にやっていきます。

f:id:mio_U_M:20170219013042j:plain

綺麗な青空に包まれた街並みで良いな〜と思って撮った写真ですが、

電線のせいで青空の綺麗さが邪魔されてるな、と思ったのでこの電線をコピースタンプツールで消していきます。

f:id:mio_U_M:20170219013043j:plain

白抜き丸あたりをコピーして電線を塗りつぶしていきたいと思います。

白抜き丸のところにカーソルを持っていき、Altキーを押しながらクリックすると、カーソル周辺の領域がコピーされるので

コピーされたらあとは図の塗りつぶし丸のようにカーソルでドラックしたりクリック連打したりしながら対象を消していきます。

f:id:mio_U_M:20170219013044j:plain

一通り消した画像がこれ。

うーん、クオリティあげないとな(反省)

周囲にうまくなじませながら消していくのがポイントなので
一回Altキーで領域コピーして終わり、ではなく、ちょこちょこ領域選択コピーして塗っていくとなじんでいきます。

 

スポット修正ツール

 こちらはコピースタンプツールとは違い、領域コピーする必要がないです。

塗った領域の周囲の色合いやテクスチャや形を自動的に判断して、周囲になじむように修正をかけていってくれるのです。

こちらも実際に見てみます。

f:id:mio_U_M:20170219013045j:plain

 木のうろから咲く彼岸花。とても情緒がありますが、1本だけ束となっている花たから別れちゃってバランスが悪くみえてしまいます。こいつをスポット修正ツールで消していきます。

 

f:id:mio_U_M:20170219013046j:plain

コピースタンプとは違い、どんどん領域を塗っていきます。

周囲の領域を判別してなじませていくので、一気にがーっと塗りつぶしていくよりも、

がっ、がっ、がっと少しずつ塗っていく方が良いです。

また塗る方向によっても判別する領域が変わるので、頃合いを見ながら縦横塗っていくと良いです。 

 

f:id:mio_U_M:20170219013047j:plain

 一本消してできたのがこちら。

 今回はスポット修正だけではなく、なじませツール(スポット修正と同じタブの中にあります)で最終的な調整をして仕上げました。

個人的にはスポット修正の方が綺麗に消せますね。

 

 

というわけで画像補正に役立ちそうな機能をちょこっとまとめて見ました。

Webデザイナーが画像を補正していく機会はザラにあるとのことなので、補正技はもっと腕を磨いていきたいですね。

バナー制作にも役立てていくぞ〜

 

【LINEスタンプ】全国津々浦々のすべてのSEに捧げるLINEスタンプ 「がんばれ!SEスタンプ」

f:id:mio_U_M:20170219012910j:plain

今日も今日とて炎上中⁈
全国津々浦々のすべてのSEに捧げるLINEスタンプがこの度登場!
修羅場な現場のSE、炎上中な現場のSE、嵐の前の静けさな現場のSE、
もちろんSEでもなんでもない人もぜひぜひインストール!!
現役SEが送るLINEスタンプ
がんばれ!SEスタンプ

http://line.me/S/sticker/1385951

という説明文を上の画像に入れたかったのですがスペース的に無理でしたのでここに書きました。


ということでやっと審査通りました!パチパチパチパチ
去年の11月だったかな?母と話していた時に急に前触れもなく降ってきた
「SEの実態をパロったスタンプあれば面白いんじゃね?!?!」という思いつきを
勢いだけで実現してみました。
(ちなみにその時母と話していた内容はまったくスタンプと関係ないことだったので未だになんで思いついたかはわからないです)

イラストは好きで描いてたからなんとかなるけど
スタンプなんて初めて作るからどうやりゃいいんじゃーと思いながら作りましたが、案外あっさり簡単に作れました!
そして一回審査通りませんでした!(ファイル不備のため)

あんまり需要を考えずに自分の経験値を広げるためそして思いついたらやっちまえな気持ちで作ったのですが
「あ、これいるかも」と思った方がいたらぜひお使いくださいm(_ _)m

※なおこのスタンプは基本的にはフィクションです。
実際の現場は各々のSEの環境に寄りますので
一概にSE現場がこのスタンプのとおりとは限らないことをご承知おきください