徒然畑

徒然なるままに。

【Webデザイン】今週の「良きウェブ」(2月3日〜2月9日)

こんにちは。すき焼きが恋しい季節です。

さて今週もツイッターでつらつら呟いていた良きウェブサイトをまとめたいと思います。

デザインが「良きウェブ」

Change the Work|RaNa design associates, inc.(株式会社ラナデザインアソシエイツ)

f:id:mio_U_M:20180207015236p:plain
http://www.ranadesign.com/recruit/changethework/
デザイン事務所の採用サイトです。パララックスの使い方がデザインにうまく適した形であしらわれています。
思わずスクロールしたくなるサイトです。

Peckham Levels

f:id:mio_U_M:20180207015339p:plain
https://www.peckhamlevels.org/
四角形をところどころ切り取ったようなレイアウトが見ててかっこよさが感じられます。
アニメーションの動きも四角形をモチーフにして統一感があるところもまた良い。

Epic Magazine: Little America

f:id:mio_U_M:20180207015423p:plain
http://www.epicmagazine.com/littleamerica/
縦スクロールを基本としてますが、人物についての記事は横スライドで雑誌のように読むスタイルなので、マガジンらしさを読んでいて感じるサイトです。
タイポグラフィを生かしたヒーロービューもマガジンらしさを感じられます。

JUKO RADIO|八戸重工商事ラジオCM

f:id:mio_U_M:20180207015457p:plain
http://hachinohe-juko.co.jp/corporate/radio/
フレームのようにページを囲むレイアウトは最近見かけますがおしゃれです。
ラジオをコンセプトにしていることもあって、PC版で見れるマウスに追随するチューナーの動きやロゴの震えは粋な印象を受けます。

株式会社ゼロ

f:id:mio_U_M:20180208003931p:plain
http://zero-com.jp/
アメコミ調でポップなウェブサイト。
思わずソースを覗きたくなるレイアウト組です。

ギミックや発想が「良きウェブ」

Julie Bonnemoy - Portfolio

f:id:mio_U_M:20180207015530p:plain
https://juliebonnemoy.com/
さらっとWebGLを取り入れているポートフォリオサイトです。
作品の見せ方のスライディングの仕方も心地よいです。

加山雄三の新世界

f:id:mio_U_M:20180207015611p:plain
http://kayama-shinsekai.com/
このデザインを思いついた人を知りたい!と思わせるほどユーモアとポップさに溢れたページです。
構成主義的なコラージュアートを彷彿とさせるこのサイト、CSSアニメーションでグリグリ動かしているようです。
参加アーティストのぐるぐる動かしているところは実装的には特に見ものです。

gskinner lab

f:id:mio_U_M:20180207015653p:plain
https://lab.gskinner.com/
CreateJSを開発したチームのラボサイトです。
様々な作品事例を紹介しています。

AID-DCC Inc.

f:id:mio_U_M:20180210095853p:plain
https://www.aid-dcc.com/
スタイリッシュかつダイナミックなサイト。
このサイトはPCで見るのがおすすめです。
ホバー&クリック時のアニメーションが特に見もの。

Adova Group, bien dormir pour mieux vivre

f:id:mio_U_M:20180210100340p:plain
http://adova-group.com/fr
社内のチームメンバーが呟いていたサイト。
中心の円をベースに展開していく背景は圧巻です。

アニメーションが「良きウェブ」

Fork Spoon

f:id:mio_U_M:20180207015728p:plain
https://t.co/2UUXiFh5ih
鍵マークとDESIGNの文字の点滅がとても心地いいです。
この動き見てると夜のネオン街のチカチカ光る電飾みたいだなと思うのは私だけでしょうか。

tashi design

f:id:mio_U_M:20180207015715p:plain
https://tashi.design/
デザインも動きも可愛らしいサイト。
おしゃれで手作り感を感じられるポートフォリオです。

株式会社メタップス 採用サイト

f:id:mio_U_M:20180207015744p:plain
http://metaps.com/careers/
ロゴはSVGアニメーション、背景はcanvasを用いたアニメーションで構成されている模様です。
ちゃんと枠外からもビュンビュン三角形が飛んできます。

Den of Thieves | Official Movie Site | Now Playing

f:id:mio_U_M:20180208003850p:plain
http://denofthieves.movie/
斜めを基調としたデザインとレイアウトです。ハンバーガーメニューもちゃんと斜めってます。
回転のイージングがサイトのクールさを引き立てています。

AROUND inc.

f:id:mio_U_M:20180209013938p:plain
https://around.co.jp/
宇宙をテーマにしたポップで楽しいアニメーションやデザイン。
トップへ戻るのボタンがロケット発射なのが遊びゴコロ満載です。

the HOUSE

f:id:mio_U_M:20180209014245p:plain
http://www.thehousetokyo.com/
最近よく見かける、スライダー+αのデザイン。
スクロールするたびにランダムに模様が変わる枠も楽しいです。

DANCE NOT ACT | 株式会社ダンスノットアクト

f:id:mio_U_M:20180209014610p:plain
http://www.dancenotact.com/
手がけた映像作品のサムネイルが映えるレイアウト構成になっています。
マウスオーバー時や画像切替のアニメーションがとてもクールなサイトです。

ベイク チーズタルト | BAKE CHEESE TART

f:id:mio_U_M:20180210095239p:plain
https://cheesetart.com/
行列ができるチーズタルトでおなじみのBAKEのウェブサイト。
こちらもパララックスの使い方がうまいです。お店のストーリーを読み進めるのを邪魔するどころか誘導してくれるようなアニメーションです。

真似したくなるようなテクニックがある「良きウェブ」

横瀬クリエイティビティー・クラス ー YOKOZE CREATIVITY CLASS

f:id:mio_U_M:20180207015755p:plain
https://creativity-class.xyz/
文字すかし写真背景も最近よく見られますよね。
このサイトのヒーロービューはプラスして文字が流れているアニメーションが加わっています。

株式会社カプセル

f:id:mio_U_M:20180208004218p:plain
https://t.co/4lt4demynX
クリックしたらずらずらと現れる、ナビゲーションがメイン並の存在感を放つウェブサイト。
シンプルな作りだからこそ引き立ちます。


いかがでしたでしょうか。
今週は結構面白い作りなサイトを見かけたので表現の奥深さを思い知ったのと、
だんだん自分の好みのWebサイトがどんなものかわかってきた気がした一週間でした。
今後も継続しますが、皆様が知ってる良きウェブがあればぜひ教えてください。

【Webデザイン】今週の「良きウェブ」(1月29日〜2月2日)

こんにちは。正直言って毎日めまぐるしいです。

最近社内のチーム内での個人的な今年の目標として「ウェブ上での表現力や演出力を高める」と掲げました。
その一環として、自分の表現のインプットを増やそうということで毎日良い!と思ったWEBサイトやWEB表現を一日最低3つ見つけることを目標としています。
(ツイッタで私をご存知のかたは、最近やたらサイトが流れてくるのはそのためです)

ただ見つけるだけでは意味がないので、それぞれ収集したサイトや表現を
「デザイン」「ギミックや発想」「アニメーション」「真似したい」という観点でカテゴライズしてまとめることにしました。

そんなわけで、1月29日から2月2日に見かけた「良きウェブ」を紹介しようと思います。

デザインが「良きウェブ」

富山アートトリップ

f:id:mio_U_M:20180207073704p:plain
https://toyama-art-trip.jp
ファーストビューのコラージュ風タイトルがおしゃれです。
縦書き指定、斜めカットの写真、縦書きの地図マークレットなど、実装的にも参考になる箇所がたくさんあります。

intentionallies

f:id:mio_U_M:20180207074019p:plain
https://t.co/4shQ03NbBN
ページの構成が斬新です。会社のキーワードとなる言葉たちをタグとしてトップに表示されます。
余計な情報を削ぎ落としたシンプルな構成となっています。

Elegant Seagulls

f:id:mio_U_M:20180207010456p:plain
https://www.elegantseagulls.com/
デジタルクリエイティブを専門とする事務所のサイトです。
鳥の羽をモチーフにしており、ページ切り替え時のアニメーションやスクロールした時の羽の動きがロマンチックなサイト。
レイアウト構造や画面下部のスクロールした時の人物のモーションなども参考にしたい箇所が盛りだくさんです。

PAPER TIGER

f:id:mio_U_M:20180207010701p:plain
https://www.papertiger.com/
ヒーロービューの文字に写真や色マスクがかかっているのがおしゃれです。
各ページのカラー構成はもちろん、canvasを利用したアニメーションもスタイリッシュなサイト。

ギミックや発想が「良きウェブ」

1-10 Robotics

f:id:mio_U_M:20180207010417p:plain
https://1-10robotics.com/
株式会社ワントゥーテンロボティクスのコーポレートサイト。
コミュニケーションロボット開発を中心事業としているだけあってか、サイトの案内役のロボットがトレードマークとなってます。
時間帯によって会話内容が違ったり、テキストうちで話しかけられたりできるのが楽しいです。

Ueno Interview

f:id:mio_U_M:20180207075855p:plain
https://interview.ueno.co/
WebGLで作成された3Dもりもりなサイト。
サイトのプレイヤーとなって各社員にインタビューしていく形式がゲーム感覚で楽しいです。

POSSiBLES

f:id:mio_U_M:20180207080124p:plain
https://t.co/AKUY4j5Czb
スマホでも見れますが、是非ともPCで見て欲しいのがこのサイト。
このサイトのダイナミックさがわかるのはPC版ならではです。

De Boer & de boer | Nespresso | Nespresso Netherlands

f:id:mio_U_M:20180207081046p:plain
https://www.nespresso.com/mobile/nl/en/deboer
何語かがわからなかったのが残念ですが、上空から撮影した映像の上にナビゲーションが現れるようになっている高度な仕掛けをしているサイトです。
パノラマ撮影した画像をうまく取り入れ、農園の空気感をうまく伝えています。

アニメーションが「良きウェブ」

Milwaukee Ballet

f:id:mio_U_M:20180207010739p:plain
https://www.milwaukeeballet.org/
バレエ教室のサイトです。ところどころアクセントカラーに赤を使っているおかげで、「内なる情熱」が感じられます。
トップページのスクロール時のサークルアニメーションが可憐なサイト。

Design Leadership Forum Brought to you by InVision

f:id:mio_U_M:20180207010436p:plain
https://www.invisionapp.com/design-leadership-forum
四角形とモノトーンを基調としたデザインがかっこいいサイト。
四角形をうまく用いたアニメーションもスタイリッシュな印象です。

MulberDen

f:id:mio_U_M:20180207082546p:plain
http://www.mulberden.com/
メインビューがダイナミックなデザイン事務所のサイト。
もりもり動きますが情報の読みやすさはちゃんと維持されているのがポイントです。

Relativity Of Time

f:id:mio_U_M:20180207082955p:plain
https://relativityoftime.net/
人類の歴史を「1分間でこの時代の人間は何ができるか」「1時間でこの時代の人間は何ができるか」という切り口で説明しているこのサイト。
アニメーションが主体となっているので、直感的に理解しやすいサイトです。

真似したくなるようなテクニックがある「良きウェブ」

LE GRAMME

f:id:mio_U_M:20180207010559p:plain
https://legramme.com/en/content/home
シンプルな作りながらも洗練された構成のECサイト
大きめのナビゲーションメニューや商品のスライドの見せ方など、参考になる箇所が盛りだくさんです。

Gradient Topography Animation

https://tympanus.net/codrops/2018/01/24/gradient-topography-animation/
さまざまなWEB表現のデモを公開しているこのサイト。
SVGとanime.jsを使って楽しいページ展開をしてくれます。

TWO Inc.|株式会社TWO

f:id:mio_U_M:20180207010643p:plain
http://two2.jp/
横スクロールでページが展開される、モバイルデバイスフレンドリーなサイトです。
背景がインライン再生動画なサイトはそれだけで目を引きます。



いかがでしたでしょうか。
ひとまず一週間やって見て感じたのは、収集するのは簡単ですが各サイトに用いられている技術やギミックが
どういう風にすごいのかを理解するところまで到達できたりできていなかったり、という点です。
なので今後はより技術的な解説もできるように各サイト解析しながら
国内外問わず様々な「これ良いな!」と思うサイトをまとめていくことを目標に更新したいと思います。

【制作メモ】GIFアニメ簡単だよ3ステップでできちゃうよという話【animation】

どうもです。おせち美味しかったです。

先日思い立ってGIFアニメ作ってみました。
今年はアニメーションをやる、と去年の暮れ頃決意していたということもあり、一番とっかかり安いと言われるGIFアニメにトライしてみました。
作ってみた結果言えることとしては、イラスト描けるよ!という人にとってはちょー簡単です。私みたいな動物が動物に見えないものを描く人間でも描けるくらいです。もっといえば、イラストを描かなくても自分で用意できる画像が何かあれば作れます(最低枚数2枚)。
今回は実際の私の制作過程を晒しながらどんな感じか説明します。

【作業環境】
CLIP STUDIO PAINT EX(作画用)
Photoshop CC(アニメーション用)
※クリスタにうごイラ作成機能があるのでそれ使えばクリスタ一本で行けますが、今回はフォトショさんを使ったアニメーションGIFをやってみたかったのでこの二つを使用しました。

ステップ1:画像を作る or 準備する

まずは画像を準備します。年賀用GIFということで鏡餅犬を描くことにしました。

【下書き】
鉛筆でグリグリ書きながら発想を膨らませます。

f:id:mio_U_M:20180104182217j:plain

犬を吠えさせて2018の1を補う(ワン = ONE )という薄ら寒い親父ギャグかましてみることにしました。
可愛く描けばきっと許されるという目論見をここで持ちます。

【ペン入れ〜仕上げ】
ここでクリスタで作業します。仕上がりはこんな感じ。

f:id:mio_U_M:20180104182856p:plain

午年の時に鏡餅馬の年賀状を描いていたので、そのデータをうまいこと引っ張って来てうまいこと手を抜けるところを手を抜きます。
あと普通にイラストを作るのと違い、画像作るタイミングでアニメーションの差分を作ります。ステップ2の画像書き出しに向けてレイヤー分けをある程度考慮しておくのがポイントです。
今回は

  • ONE以外の数字が一個ずつ登場するアニメーション
  • 右の犬が吠えるアニメーション
  • 右の犬が吠えてONEが出てくるアニメーション

の3つの要素を盛り込みたかったので、数字のレイヤー分けと犬の口元の差分作成を心がけました。

f:id:mio_U_M:20180104201131j:plain

f:id:mio_U_M:20180104201138j:plain

正直口元の差分は2つでもよかったかもと思ってます(人間の目優秀なので)。
ただ差分を増やした分動きの滑らかさが増すので、そこは作りたいものの雰囲気次第というところでしょうね。
(今回は様子見ということで3つにしました)

可愛く描けなかったのでさっきの目論見が外れそうな気がして来ましたがとりあえず横に置いて次に進みます。

ステップ2:画像を書き出す(セル作り)

レイヤーを表示したり表示させなかったりして画像書き出すだけです。以上。
…とだけの説明だとあまりに雑なのでちょっと説明。

数字が一個ずつ出てくる画像についてはそのまま表示・非表示を繰り返しながら書き出していますが、右の犬とONEの画像はいい感じに動いてるなーと感じさせるために伸縮させながら書き出してます。
特に犬の吠えている様子は口を半開きにしたタイミングで犬全体を若干縮ませ、吠えて口が大きく開いたタイミングで犬全体を若干伸ばしています。

f:id:mio_U_M:20180104201156j:plain

これ何やってるかというと、吠える前の予備動作と吠えた後の後動作を作ってそれらしく動いているように見せようとしているんです。
犬の吠えている様子を思い返してみるとわかるかと思うんですけど、吠える前って吠えるためにちょっと溜めて、吠えたらがばあっと体が大きく見えるじゃないですか。
犬が吠える動作がすぐ観察できないよ、という人はならない場合は素直にYouTubeググるか、試しに犬になりきって吠える真似してください。
吠える前にちょっと頭屈ませて、吠えた時に頭上向きになるはずなので。
※最初この伸縮をせずに書き出してアニメーションさせた時にすごくぬめーっとした動きをしたので試しに犬になりきった結果発見しました。

ここらへんのアニメーションを作る際の物体の動きについては以下の記事がとても参考になると思います。作った後この記事読み返してなるほどと納得できたんで。

photoshopvip.net

※ちなみに例で用いられているアニメーションは全てCodePenで見れるので、フロントエンドエンジニアの方がアニメーション実装の際に参考にできるかと思います

ほんとは吠える用に犬の顔も差分作ればよかったかなあと思いましたが、伸縮だけでもそれっぽく見えるので後からレイヤー分けはしませんでした。(人間の目は優秀だし)
犬の吠える動作のロジックと同じ考えでONEの文字も適度に伸縮させつつ必要な画像を書き出したら、次のステップに進みます。

ステップ3:アニメーションする

私はみんな大好きPhotoshop先生で作りました。
あらかじめアニメーションさせる画像を作っているので、以下の要領で作ります。

1.「ファイル」>「スクリプト」>「ファイルをレイヤーとして読み込み」を選択
f:id:mio_U_M:20180104202107p:plain


2. 「レイヤーを読み込む」パネルが開いたら、ステップ2で書き出した画像を選択して「OK」をクリック
f:id:mio_U_M:20180104202217p:plain


3. レイヤーとして読み込まれたら「タイムライン」ウィンドウを表示し、レイヤーをフレームとして読み込み、表示秒数やループ設定をする
f:id:mio_U_M:20180104203907j:plain
f:id:mio_U_M:20180104203911j:plain


そんな感じで出来上がったGIFアニメがこちら。

f:id:mio_U_M:20180104175931g:plain

ね、(画像の準備さえ頑張れば)簡単でしょ。

まとめ

アニメーションGIFって難しくないって聞くけどどうせ難しいんだろケッと思っている方に向けて書きました。
制作時間としては9フレームで6時間弱くらいで作りましたがそのうち大半は画像作りです。つまり画像の準備さえできれば、思い立ったら簡単にばーっと作れます。
あと今回はフォトショの力を借りましたが、ウェブ上にはGIFアニメつくるためのサイトが色々あるので、フォトショなんてねーよって方はそちらを使ってみてはどうでしょうか。
※参考URLにまとまっているリンク貼っています

次は少ない枚数でクリスタのみを使ったGIFアニメにトライしてみたいと思います。気が向いたときにやるので早くやれよコラという方は督促してください。励みにしますので。

参考URL

photoshopvip.net
このリンクはGIFアニメやってみたい!という人にとってはおすすめです。とてもよくまとまってます。
今回のフォトショで作る手順はこちらを参考にしながら作りました。
またGIFアニメーションが作れるサイトまとめも書かれてあるのでぜひチェック。

www.haconiwa-mag.com
サンプルがめちゃ可愛いです。。。!次はこの可愛さ目指す。

2017年毎月ごとの「初!〇〇」を振り返ってみる

どうもです。最近水族館にいきたくて仕方がないです。

この記事は今年やったことAdvendCalender17日目の記事としてお送りします。

adventar.org

今年は私の人生の中でも特に印象的な一年になりました。
もともと気をぬくと物理的にもメンタル的にも引きこもりになる人間が信じられない勢いでアクティブに動きまくった年なので、毎月何かしら「初!」な体験があったのです。
そんなわけで毎月ごとに対面した「初!〇〇」を綴っていこうと思います。

※先に宣言します。長いです。

1月:初!デザインスクール

そもそも今年の始まりが「Webデザインよりなことがしたいから転職するぞ!」という意気込みで始まった年なので、転職のために東京デザインプレックス研究所に1月から顔出し始めました。
転職についての詳しい話は先日公開したこの記事にまとめたので詳細は以下を読んでもらえたらと思います。

SIerのSEがWeb制作会社のフロントエンドエンジニアへの転職を決めるまで - 徒然畑

上の記事にも書いてはいますが、ここを選んでよかったなーとしみじみ思ってます。後述する私の「初!〇〇」をさらに生み出すきっかけとなる友人との出会いがあったこと、さらに言えば私が行けるとは思ってなかった企業に最終的にお声がけいただけたので。

平日、土曜、日曜と選べたのですが、私は土曜日クラスに通っていました。(平日:業務がいつ何が起こるかわからない運用担当 日曜:朝のクラスだったのですが、絶対起きれないと思った)なので基本的に土曜はいつもスクールで潰れるかと言われたらそうでもなくて、特定の週に別のクラスに振り替えすることも可能でした。なので私の場合どーしても行ってみたい勉強会があるとかいう時に振替制度発動!とかしてました。他のスクールに比べたら知名度はまだ低いかもですが、割と本気で勉強取り組んでる人が多い印象だったので、もしwebクリエイト系をスクールで勉強したい人は1つの候補として考えてみては、と思います。

2月:初!LINEスタンプ販売

思いついた衝動そのままに作ったLINEスタンプを販売開始しました。
store.line.me

(何の因果かわからないんですけどブログとかSNSで表示しようとすると勝手に英語表記になってしまいます。公開当初1日くらい悩みましたがそういう仕様だと思うことにしています)

その時書いた記事がこちら。
【LINEスタンプ】全国津々浦々のすべてのSEに捧げるLINEスタンプ 「がんばれ!SEスタンプ」 - 徒然畑

アイディアさえあればLINEスタンプ結構簡単に作れる、というのが作ってみての私の感想です。
意外と知られてないみたいなのですが、LINEスタンプは最低枚数は16枚から作れるので、何でもいいから早く作りたい!という人はとりあえず図案を16個ひねり出せば販売にこぎつけることができます。
ちなみに私の制作過程的には11月末に思いつき→12月に構成ねり&下絵完成&線画完成→1月に完成&申請、というサイクルで作りました。(早い人はもっと超速だと思います)

ただし今回「LINEスタンプを作る」という経験値重視で販促なことは全くと言っていいほどしなかったので(完成してブログとツイッターに告知したのみ)、スタンプドリーム的な話は他所様の売れている方のブログを見ることをお勧めします。。。
自分としてはポートフォリオに載せる作品ができた&交流会の場で話すネタができたのでとりあえずOKかなと思っています。次に出すときはちゃんとマーケティング的なこと踏まえながらトライしてみようーと思っています。

3月:初!動画作成

iPad mini が私の基本的なツールなのですが、やたらとアプリを試すのが好きです。
そんな私がアプリサーフィン中に見つけたAdobe系のアプリを使って簡単な動画を作ってみました。


LWC -The company providing Leather band watch-


Men's suits collection vol.2 Overcoat × suits

もともとイラスト描くのが好きでインスタにあげまくっていたのですが、アーカイブ的な感じで見れたら楽しいかな〜と思い作り出したら、案の定楽しくなって調子乗って今年は4本制作しました。
主に使用したのはこの3つです。

spark.adobe.com

www.adobe.com

spark.adobe.com


特にAdobe Spark Postはグラフィックだけでなく軽いアニメーションをつけられることができるのでとても遊びました。 videoは一番最後に使い始めたのでまだまだ模索中ですが、楽しい使い方思いつたらこいつでも色々遊んでみよう〜と思っています。
いやーAdobe先生相変わらず素敵で便利なアプリを出している。PCだけでなくモバイル端末もAdobeに囲い込まれてます。
私は基本的な作業端末がiPad miniなので結構Adobeのモバイルアプリにはお世話になっています。今度気が向いたらAdobeモバイル向けアプリについてのまとめ記事でも書こうかなと思います(気が向いたらなので書かないかもしれないです。知りたい方がいたら督促ください ←)

他にも今月やったこととして初めて事業ロゴ制作を依頼されて作ったりもしましたが、それ書いちゃうと長くなるので割愛します。

4月:初!meetup参加

スクールの友達に誘われて初めて交流会に参加しました。
海外でもよく使われているというWebサービスmeetup経由で参加したのですが、調べてみたところ様々なジャンルでイベントが開催されているみたいです。

www.meetup.com

meetupの特徴としては、海外勢に強いという特色柄日本以外の国の方の参加者が圧倒的に多いので、英語を使って自分の興味のあるジャンルでコミュニケーションしたい方にはおすすめです。
ちなみに私が友達に誘われて参加したのは国際交流的なmeetupで、日本にいる様々な国の人が集まって色々話したりお酒飲んだり的な感じのものでした。
友達と参加した後個人的に他のmeetupにも参加してみました。アート系のmeetupも結構種類が豊富なので、デッサン会やドローイング会なmeetupにも参加しました。ITとかデザイン系のものもあるみたいなので、ちょっと英語で人と話したいな、という人は使ってみるといいかもしれません。

5月:初!もくもく会参加

そんな感じで4月にmeetupに参加したことで弾みがつき、Web系の勉強会
交流会にも参加してみよう!と思い立って突撃参加しだしたのが5月です。
Web系の勉強会で初めて参加したのはこちらの「カフェで勉強会」。いわゆるもくもく会です。この会で自分の会社以外のIT系、Web系の人に出会うことができ、同じITでも色々な人がいる!Web系こんなことやってるんだ!と刺激をもらいました。

atnd.org

その後もこばしゅんさん主催のもくもく会に参加したりと、時間が合いそうなときはもくもく会に参加するようにしています。基本的にもくもく会は何かしら目的意識を持って参加されている方しかいないのでもくもく会でのモチベーション持続力高いんですよね。来年は勉強会参加ペースを減らそうと思っていますが、こういったもくもく会については今後も定期的に参加しようと考えています。

6月: 初!落合陽一さん講演会

当たったらラッキーだなーという気持ちで落合陽一さんの講演会に参加応募したところ、見事当選しました。

supporterzcolab.com

実は私が落合さんの存在を知ったのは今年に入ってからで、母から「見た目が男版のあんたや」と言われたのがきっかけで知りました。
インタビューとか色々読んでみた感じだと頭の作りが常任の数千倍違う人なんじゃないかなあと思っていたら講演会の冒頭の説明で「落合さんの話は全部理解できなくて戸惑うかもしれませんが、参加者の人がおそらくほぼ同じ気持ちに陥るので大丈夫です」と言われた時はちょっと安心しました(いいのだろうかそれで)。

いざ話を聞いてみるとやっぱりその通りといった感じで、何が人と違うかというと膨大な知識量とそれらの知識のつなぎ合わせたネットワークの大きさ、そして自分の専門分野にかけて来た集中と熱中の量が違う。
多分最初のスタートは好奇心なんでしょうけどその好奇心で得たものをわらしべ長者あるいは芋づる式に別の知識を吸収していって今の位置にたどり着いた、ということなんだなと感じました。あとはご本人がもっているドラスティックで自由な発想。そこを保ち続けるある種の無邪気さと純粋さ。そういった大人になるにつれてみんなが無くしてしまいそうな心をうまく保ち続けると開ける世界があるんだなとちょっと希望が見出せた気分でした。本当にこの講演会に参加できてよかったです。

他にも初めて出したコンペで採用されたりとか、突然OJT担当になって新人ビシビシ鍛える羽目になったりもしましたが、これまた長くなるので割愛します。

7月:初!出雲

突然母が「出雲大社いくよ!!」と言い出したので出雲旅行行ってきました。今まで人生で一度たりとも彼氏ができたことがない私を祈祷させようとのことでした。なんか心配させてごめん。

www.izumooyashiro.or.jp

歌手の竹内まりやさんのご実家である「竹野屋」をお宿に、出雲大社と参道周辺、あと松山市内をちょと散策してきました。竹野屋は出雲大社の参道沿いにあるので、確かに参拝者にとってはベストなお宿でした。宿の内装や雰囲気、出されるお食事もほっとするような心地になりましたので、参拝予定の方はこちらを利用するのをおすすめします。

参道周辺はたしかに霊験あらたかというか、歩いてるとすー、っと気分が晴れる心地でした。出雲だけ10月のことを神在月という理由も納得です。ちょうど仕事や通っていたスクールも大詰めになっていた中訪れることができたので、良い気分転換になりました。
また機会があれば気分転換に行きたいなと感じてます。あとついでにいうと本当に出雲大社に祈祷に行ったんですが、つい最近本当に彼氏ができてしまったのでお礼参りに行かないとなとも感じてます。縁結び効果ちゃんとあります(当社比)。

他にもインスタでいいねが初めて3桁超えたりとか(インスタ壊れたかと思った)、大学時代からお世話になっていたVAIOのノートからiMacに乗り換えたりがありましたが、これまた長くなるので割愛します。

8月:初!Dist参加

Web系の勉強会で一度は聞いたことがあるんじゃないでしょうか。沖さん主催のDistに初めて参加しました。

dist.connpass.com

がっつりLT系の勉強会に参加したのはこれが初めてでした。この会のおかげで今現在のWeb制作やアプリケーション制作で使われる制作ツールだったり技術だったりを知ることができました。もともとが業務系でレガシーなデスクトップWebアプリケーションの開発にしか携わったことのない私にとっては全体的に「なんかよくわからんが色々ある」と若干白目向きかけたのが本音です。でもそれと同時に自分の知らない辛くも面白い色々があるんだなーと感じました。そもそもデザイナーとエンジニアが協力して何かをつくる、という現場を体験したことがなかったので、それだけでも魅力的に思えたからです。そんな感じで興味が芽生えてフロント近辺のこと勉強しだしたのもこの頃からです。
(ついでにいうとこの後Distの運営側にも参加表明しちゃいました。色々知れる現場にいたいなという思いだけで突っ込んでいっちゃいました。。。)

9月:初!デ部会参加

いつもすぐに満席になってしまう勉強会の一つ、cloudpackさんのデザインセクションチーム主催の「デ部会」に参加しました。

devkai.connpass.com

私が参加した会は「Webと写真のこと」をテーマにした勉強会でした。カメラのことや画像のことはあまり詳しくなかったのでこれは参加せねばーと思い聞いてきました。
特に興味深かったのは工藤さんのLT。実際に画像をWebページ上で扱うときにどう実装するの?画像をどう扱うの?ということを詳しく解説してくださいました。

cloudpack.media

そしてこの勉強会にでたあたりから「フロントエンドエンジニア」という職種を意識し始めました。今やもうWebやアプリを取り扱う場合にデザインとエンジニアリングの境目はなくなってきている。だったら、その療法を見つめることが出来る立場の人間になりたい。そういう思いを抱かせてくれたのは、実はこの勉強会に参加がきっかけだったのです。そして結果として、Webデザイナーではなくフロントエンドエンジニアとしての道を選択することとなるのでした。

10月:初!ライブハウス!

人生で初めてのライブハウスでのライブ!行ってきました。
佐野元春さんやギタリストの布袋さんや福山雅治さんのベースを担当してきたベーシスト、井上富雄さんの個人プロジェクトのTOMIO BANDのライブでした。ベース&ボーカルの井上さんに、ギターの尾上サトシさん、ドラムの田中轍さんの3ピースバンドでした。

440.tokyo

基本はロック、時々アコースティックも交えながらの編成だったのですが、ライブハウスって演奏の音が体に染み入るんじゃないかというくらい音が響くんですよね。その音の臨場感だけでも感動なのに、TOMIO BANDのみなさんが奏でる音楽がまためちゃくちゃかっこいいんです。どういうかっこよさかというと、色気のある格好良さ。この世の酸いも甘いも色々見てきた上でそれらを受け入れた上で音を奏でているように感じられて、「音だけで情景を彷彿させる」という体験をこのライブで初めて行いました。あんなかっこいい音楽を奏でられる大人って、本当にずるいです。
ライブ終了後は演者と直接お話しすることができるのがライフハウスのよさ。素直に感動したことを伝えつつ、井上さんのアルバム2枚を購入してしまいました。また機会があれば聴きに行きたいです。

あとはこの時期に初めてポートフォリオサイト開設したりとかもしましたが、まあその話も長くなりそうなので割愛します。

11月:初!CSSNite参加

Web界隈に身を置く人間なら誰もが知っていると言っても過言ではないイベントCSS Niteに初めて参加しました。

cssnite.jp

フロントエンドエンジニアやコーダ向けな会でしたが、わりとデザイナーさんも参加していました。やっぱり今はもうデザインもフロントエンドも垣根がなくなって来ているんじゃないかなということを一人色濃く感じた記憶があります。フロントエンドエンジニアとしてどういう知識が必要なのかを整理できたのと、懇親会で普段ツイッターでしかお目にかかれなかった方にお会いできたのとで、刺激ももらいながらも充実した勉強会となりました。

12月:初!退職

そして今月、3年ちょっとお世話になった今の会社を退職します。
来年からはWeb系制作会社でフロントエンドエンジニアとして新たなスタートを切ります。
色々ありましたが今の会社での3年ちょっとを通じて社会人の基礎は構築したかなーというのとIT世界の基礎はみてこれたかなーという感じなので、来年は「今まで抑えていたことをばんばん放出する年」というキャッチフレーズで進んでいこうと思っています。
今の会社や現場で色々お世話になった方には本当に感謝の気持ちでいっぱいです。ありがとうございます。(と来週の送別会で伝えようと思っています)

あとついでにいうとそもそもアドベントカレンダー初めて参加した、というのも今月の初!でした。勢い余って3記事も書いちゃいました。。。

総括:2017年をふりかえって

今年はとにかく運が良かった&動いた分だけ視野が広がった

自分で言うのも何なんですが、今年は私の今までの人生で稀に見る変化の年でした。一言でいうと「種蒔き」の年だと感じています。
種を蒔くためにあれこれやってみたら、色々と前向きに進んだ上に「運がいい!」と思うことが色々起きた。。。という心地です。
もしかすると来年どーーんと不調な時期がくるかもしれませんが、今年はそのどーーんが来てもいいように備えはできたと思いますし、何よりメンタル的にも気持ち的にもさらに明るくなった&強くなった気がしますので、まあ来年どうなっても大丈夫です。なんとかしようとすればなんとかなる。

色々な人の出会いが今年一番の財産

とまあそういう感じにめっちゃ楽天的に考えることができるようになれた一番の要因は「人との出会い」です。今までは社外に知り合いなんてほぼいない&SNSはとりあえずやってるというだけの基本ぼっち勢な人間が今年はめーっちゃ色んな人を見たり色んな人と話したりしました。それらを経たことで「自分が何を大切にしたいか」「何をやりたいか」というのをはっきり見出せて来た。人との出会いによって自分の軸が強化された一年だと感じてます。
なので私の今年のベスト・オブ・スペシャルサンクスは今年お会いしてご縁があった皆様です。みなさまが私のこと覚えていようがいまいが関係なしに今年私と出会った方には感謝の気持ちを献上します。私に色々な人生経験値をくださってありがとうございました。


そんなわけで。締めもまとめもへったくれもない気持ちの赴くまま書いたこのブログを最後まで読んでくださり、ありがとうございました。

SIerのSEがWeb制作会社のフロントエンドエンジニアへの転職を決めるまで

どうもです。今日もとり天が美味しいです。

この記事は転職アドベントカレンダー14日目の記事としてお送りします。

adventar.org


10月末から転職活動をしていた私が、この先ここで頑張ろうと思える会社に出会うことができ、今週内定受諾しました。
転職活動は終了ということで自分のこれまでの振り返りの意味も込めて転職レポを書こうと思います。

私について

SIer企業でSEを3年ちょっとやってきた人間です。
業務用Webアプリケーションの開発に2年ほど携わり、今は開発を担当したアプリケーションの運用担当としてお問い合わせ対応とか小規模改修対応とか工数見積もりとかをやってきました。
現在のメイン言語はJava、ほかにはC#とかを扱ってました。
現場のシステムの都合で今年からCとかシェルとかも見たり触ったりしだしましたが、一向にデレる気配を見せないままお別れしそうな予感です。

元々高校時代は理系にいましたが、物理が最後までデレてくれなかった&英語はめちゃデレてくれたという理由で文転した文系学部出身で、大学ではデザイン史を専門に勉強・研究していました。
中学くらいの時に友達とホームページ運営ちょっとやったりタグとかCSSいじったりしたことがきっかけで情報系に興味を持ち、大学在学中に約一年ポーランドにある情報系の大学に交換留学に行ってました。

小さい頃から何か手を動かしてものを作るのが好きなこと、
特に絵を描くのが好きで、グラフィックデザインとかWebデザインとかに派生して興味を持ったという経緯から、就職活動時はSEとWebデザイナーの2つを軸に進めていましたが、最終的にご縁があったのがSEの方でした。

転職しようと思ったきっかけ

遡ること去年の8月頃、お偉いさんとの面談で「この先どういうSEとして社内でやっていきたいんだ?」と3年目を迎えるとよく聞かれる質問に対し「そもそも私この先もこの会社でこの仕事でやっていきたいのか?」という疑問に直面したのがきっかけです。
そして色々考えた結果、

  • 仕事で一番楽しいなあと思った瞬間は自分の手でプログラムを書くことだということ
  • 自社の「カタイ感じ」(基本同じ言語しか使わない、割とみんな安定思考、年功序列な雰囲気)がなんとなく合わなかったこと
  • 就活時代にWebデザイナー目指して企業に採用応募をしまくったこと
  • そもそもプログラミングとかに興味を持ったのは中学時代にHTMLとCSSをいじったことがきっかけだったということ
  • そもそもデザインとかビジュアルとかに昔から興味があって大学でもデザイン史やウェブ広告の研究をしていたということ

 →やっぱりWebデザインに関わる仕事がしたい!

という結論に至り、「転職してSEからWebデザイナーになる」を今年の目標に掲げました。

転職準備をどうするか

そうとなったらWebデザイナーとしての勉強をしよう作品を作ろう、ということであえて専門学校に行ってみることにしました。
入る前に色々調べたんですけど、今の時代オンライン学習サイトもあるしその気になれば独学である程度スキル身につけたり作品作ったりができます。
だけど私は

  • 同じ志を共有する仲間が欲しい(そして「自分も負けたくない」と思わせる環境が欲しい)
  • 現場のデザイナーとの繋がりが欲しい(講師はもちろんのことステップアップのためにWebを学びにきているデザイナーさんも生徒にいるとのこと)
  • 一人だとダラける可能性が高い(コツコツやるというのが苦手&短期集中が得意な人間は集中できる環境や体制を構築した方がいい)
  • 一度くらいデザイン系の学校行ってみたかった(これは感情的理由。美大行きたかったけどお金がかかりすぎることを理由に断念した人間なので)

という4つの点からスクールに通う選択をしました。

私が最終的に通おうと決めたのはこちらの東京デザインプレックス研究所です。

www.tokyo-designplex.com

デザプレ含めて3つくらい話聞きに行ったんですけど、対面クラス授業形式で先生一人が生徒10人くらいの面倒を見る、という体制を取っているのはここだけだったので、仲間が作りやすい&先生に何かあれば質問しやすいと判断してここにしました。

スクールに通ってる期間中の活動

結果としてここに入って良かったと思っています。
同じクラスの人たちの作品クオリティやレベルが高かったことと、スクール卒業後も一緒に励まし合いたいと思える友人との出会いがあったので、刺激ときっかけをここでもらいまくりました。

あとスクールにお金を投資した分危機意識が芽生えたのか「通うだけで満足したらダメだ」と授業外の活動も活発になってました。
主にやったこととしては、Webサイト以外の作品や制作、そして勉強会や交流会への参加です。
自分の名詞だったりLINEスタンプだったりバナー制作だったり動画制作だったりを平日仕事が終わってから作りつつ、今まで参加したことがなかったWeb系の勉強会やクリエイター交流会などに足を運ぶようになりました。
特に勉強会や交流会に参加し出したことで、今まで出会うことがなかったデザイナーさんやフロントエンドエンジニアさんなど様々なジャンルの方にご縁ができたのは自分にとって一番大きかったです。単純にスクールだけ通っていたら得られない情報や考え方を獲得できたのも、こういった場に参加したおかげです。

  • 学びの場は一つに限らず複数の手段を持つこと
  • 現状の環境に満足せずいろんなものに出会おうと行動すること
  • 常に自分が尊敬できる人、すごいと思う人と近い距離に居られるような環境を作ること

スクールに通っていた頃はこの三つを無意識のうちに意識していたような気がします。
そしてこれらは、今後の私の活動においても意識していきたいことです。
(ここら辺の具体的に何を作ったりどんな勉強会行ったりの話は後日公開予定のブログにて書こうと思います)

スクールを終えて転職活動に入る頃

実際にスクールに通ったのは半年強くらいでした。
色んな勉強会に出たりネットでWeb系の記事を呼んだりしながら9月に授業を終えたころには私の中で心境の変化が起きていました。
それは「フロントエンドエンジニアという選択肢もありなのかも」ということ。

実はフロントエンドエンジニアという職種を認識したのは勉強会に参加し始めてからでした。
とある勉強会のフロントエンドエンジニアさんのお話を聞く機会があり、その方のユーザーがWebサイトを快適に閲覧するための技術や、モバイルファースト時代に合わせた技術の具体的な使い方を紹介している姿を見て、とても魅力的に感じたのと同時に「Webデザイナーとエンジニアの境目ってなんだ?」と感じたのです。
そう思った背景には2つの要素がありました。まず1つはコーディングの知識を持っていることがWebデザイナーの前提条件であることに加え、今後ますます技術力を持っていることが求められると感じたこと。もう1つは昨今のWebサイト構築が段々と今関わっているアプリケーション開発と変わらないように思えたことです。そういった中でWebデザイナーの存在感を見出すのは今後難しいのかも、と個人的に感じました。

そもそも私は、色んな勉強会やスクールでの学びを経て、「デザイナー」という仕事は「クライアントの目的に沿い、かつエンドユーザの体験に貢献するための最適なものを提案するプロ」という風に捉えていました。
そしてその姿勢が私が目指したいものだと感じていたので、そういう意味だとフロントエンドエンジニアもWebの体験をコーディネートするプロだし、ビジュアルに関わりつつ、細かい作り込みを追求できるのもこの職種なのでは?と感じたのです。
技術もデザインも好きで、できるだけその両方の要素を潰したくないと感じていた私にとっては、フロントエンドエンジニアとしてのキャリアチェンジもありなのかも、と思うのは無理もなかったのかなと感じています。

転職活動、そして内定

転職活動期間としては1ヶ月ちょいでした。
転職活動に入る前に今いる会社には今年度いっぱいで退職する旨を伝えていたので、「この月は転職活動月間だ、決めるぞ」と思ってばーっと集中して動いてました。
基本的には複数のエージェントや転職サービスを使いながら転職先にエントリーを行なっていました。あとは個人的に気になった会社のエントリーフォームに出したりしてました。

結果として3社内定をもらいましたが、内定を決意した会社の決め手は「働く人」「環境」「作品のレベルの高さ」でした。
特に印象的だったのは、Webデザインの勉強がてらに見かけた「すごい!」と思ったWEBサイトの製作に関わった方に面接官としてお会いできたことです。
面接を受けることになる前までその会社が作ったということを知らなかったので、これは何かの縁だ!と思い勢い余って色々質問してしまいました。
そしてその方々から「つくることが好き」「真剣に楽しむ」「全力なプロ意識」を感じ取り、その会社にいる人の特徴や姿勢、大事にしていることに共感や魅力を感じて、私もここで全力でチャレンジしたいと思うようになりました。
その思いを最後まで素直に伝えた結果、内定をいただくことができました。

転職活動を終えた今だから言えることですが、私は面接に臨む際に「面接官として出てくる方は、その会社を具現化した鏡だ」と思ってお話ししていました。
特に役員やリーダークラスの方が面接官として出てきた場合、今面接を受けている会社の価値観に沿ってみたときに、それだけのポジションを与えるに値する人間だと判断された人がどういう方なのかを知ることができるとてもいい機会です。
もしその人に自分が尊敬の念や共感を覚えたなら、その会社と自分がマッチする可能性が高い。その観点から見ても内定を承諾した会社と自分は何かしら縁があるとひとり強く感じています。

これから

そんなわけで1月からフロントエンドエンジニアとして新たなスタートを切ります。
正直なところ、楽しみ半分、緊張半分、加えて全力でやるぞ100%な気持ち、というよくわからない心境でいますが、そうやって全力で取り組みたいと思える会社に出会えたのは幸運です。
来年の今頃にはさらにパワーアップしている自分になるように、来年もまた邁進していきます。
楽しむぞー(`・ω・´)

とり天 -My Best Fantastic Food-

突然ですが皆さんはとり天を食べたことがありますか?
ないならぜひ食べましょう。
あったとしてもぜひ食べましょう。

とり天との出会い

とり天ーーー南は九州の大分県発祥のローカルフードであり大分県民のソウルフードであるこの天ぷら。
私ととり天はちょっと変わった出会い方をしています。
というのも、一番最初にとり天の存在を知ったのは、漫画なのです。

鹿楓堂よついろ日和 2巻 (バンチコミックス)

鹿楓堂よついろ日和 2巻 (バンチコミックス)

和風喫茶で働く四人のイケメンスペシャリストと喫茶店に訪れるお客さんたちとのストーリーを描くウルトラ飯テロスイーツテロ漫画なのですが
この巻の第6話で振舞われたとり天丼が妙に美味しそうに見えたのが始まりです。
しかもこの巻末のあとがきで作者さんが「予想以上に美味しすぎて思わずとり天に謝る」一コマをみてこいつはやべえ奴がいるぞ・・・と思ったのが第一印象でした。
(ところで鹿楓堂よついろ日和2018年にアニメ化決定したそうです!おめでとうございます!)

そしてそんなファーストインプレッションから少し経ったある日…
業務でふらふらになった昼休み、たまたま見つけた天丼屋でたまたま期間限定で売り出されていたとり天丼を注文した私。
一口食べた瞬間感じたことは
「力が。。。みなぎってくる。。。!」
超スピードで瀕死状態からHP値MP値共にMAXになってその後の仕事をバリバリこなした驚異の一品、とり天。
以来すっかりとり天の虜になりました。

今年ヘビロテした罪深きとり天写真

そんな感じで今年は私の中でとり天とり天とり天大フィーバーしまくって
Twitterにそのうるささを吐き出さないように自制心が働いてアプリをアンインストールしたほどだったのですが
たまたま今回「今年食べた最高のご飯の写真Advend Calender」を見つけてしまったので
せっかくなので普段抑圧していた私のとり天フィーバーを放出します。

天や 柚子こしょう鶏天丼

f:id:mio_U_M:20171204225524j:plain

ご覧ください、こいつが私をとり天フィーバーに叩き落とした張本人です。
いつみても綺麗な顔していやがって...(号泣)
では早速罪深いポイントを上げていきましょう

ポイントその1:ボリュームたっっぷり!しかも3種類?!のとり天

そもそもとり天って普通の天ぷらとどう違うの?と感じる方もいらっしゃるかもしれません。
とり天の特徴はあげると鶏肉がふっくら厚みを増してジューシーになり、
だけど味は衣で包んでいるのでぎとぎとしないしっとりした味わいになるのです。
サクサク、ジューシー、しっとり。このトリプル体験を一枚で味わえる驚異的な存在がとり天なのです・・・!
しかも天やのとり天は通常のとり天より大きめなのでな上に「とり天2枚とつくね天1枚」がデフォルトなので満足感の持続力が違います。

ちなみに・・・あくまで私の食べた感じで、ですが
この二枚どうやらムネ肉とモモ肉をそれぞれ使っているみたいなのです。
ただし天やのWebサイトを見まくりましたがムネ肉とモモ肉それぞれ使っていますとは一言も書いていないのですが、どう考えても二枚の食感と味が微妙に違う。。。
これはムネ肉とモモ肉それぞれ使っているのでは…こいつ、さらっと3種類のとり天をお客様にサービスしている・・・?!
と天やの恐ろしさ(褒めてる)に慄きながら食べていました。
※ただしあくまで個人的な推測です。実は二枚ともムネ肉だよと言われたらもっと利きとり天修行に励みます。

ポイントその2:魅惑の温泉卵と奏でる絶妙ハーモニー

天やの通常のとり天丼だとシンプルにとり天が乗っているだけですが
私は温泉卵乗せを注文することをおすすめします。
鳥と卵、親子が織りなすコンビネーションの味わいの破壊力が凄まじいのです。
温泉卵をチョン、と割るととろりと溢れる黄身をとり天に絡ませて食べると口の中で鶏肉のジューシーさ、衣のサクサク感がさらに引き立つのです。
親子丼、鶏肉と卵の相性がとても良いですよね。それは鶏肉を揚げても同じことが言えるのです。

ポイントその3:ほのかに香るゆず胡椒の奥ゆかしさ

天やの勘所が素晴らしいと思ったのが味付けにゆず胡椒を使っているところです。
甘だれに馴染むほんのりゆず風味のおかげで、ご飯と食欲ととり天が進むこと進むことこの上なし。
ゆずは和食との相性がいいことで定評がありますが
(ゆず風味の味ポンとかゆずの皮入りの浅漬けとか私はめちゃくちゃ好きです)
それはとり天においても例外ではありません。
天ぷらの油みをあまり感じることなく爽やかな味わいになっているのは
このゆずの存在があってこそ、とも言えます。
(ちなみに天やで使われている油は植物油なので、体に重くならないのも嬉しいポイントです)


ちなみにちなみに。
この華味鳥のとり天丼は期間限定のため今は販売していないのですが
現在は嬉しいことに期間限定でふもと赤鶏のとり天丼が発売されています!
www.tenya.co.jp

先日私は究極な腹ペコ状態な時に食べにいきましたが、こちらもこちらでめちゃくちゃ美味しかったです。
(あまりに空腹状態だったため写真を取り損ねたことをお詫び申し上げます)
どうしようとり天丼食べたくなっちゃった。。。と言う人はこちらをぜひお試しを!

やよい軒 とり天とだんご汁の定食

f:id:mio_U_M:20171204232412j:plain

寒さが身に沁み出すころに現れたのは、やよい軒の大分味わおうなこの定食でした。
この定食の罪深いポイントを挙げていきましょう。

ポイントその1:揚げたてサクサク!なとり天

やよい軒がこの定食に関してうたっているのが「注文してから揚げる、できたてのとり天」
なので歯ごたえサクサク、中はジュワァ、なとり天が堪能できるのです。
鶏肉のジューシーさと天ぷらの衣のさっくり感が絶妙なハーモニーを奏でており、これだけでまず疲れやストレスが約40%吹っ飛びます(当社比)
そのままガブリと行くのもよし、ポン酢につけて味わうのもよし、
さらにゆず胡椒もセットでついてくるので、お好きな方はゆずごしょうと一緒に食べてもよしなのです。

ポイントその2:一口飲めば故郷が広がる。懐かしのだんご汁の味

そしてこの定食、そもそもはとり天定食、ではなく、大分の郷土料理を味わうことをテーマにした定食なので
とり天と同じくらいに存在感があるのがだんご汁です。
実は私はこのやよい軒のとり天定食で初めてだんご汁を食べたのですが
食べた瞬間目の前に田園都市風景が・・・
と言ったらちょっとヤバい食べ物じゃないかと思われてしまいますが
もうちょっとくだいて言うと、日本人によくなじみのある味噌汁とうどんのいいところを掛け合わせて作り出された、胃腸に染み渡る味わいなのです。
そしてこのだんご汁には付け合わせのゆず胡椒がとても合います。
味噌と野菜、そしてゆず胡椒のほんのりスパイシーさを麺に絡めて食べるとこの上なく幸せな気持ちに浸れますのでおすすめです。

ポイントその3:ご飯がもっと食べたくなる!ご安心ください、ご飯おかわり自由です

私が住んでいた家の近所にはやよい軒大戸屋がどちらも徒歩圏内にあるというあからさまな定食屋戦闘地域だったのですが
私は迷うことなくやよい軒派でした。
というのも、やよい軒はご飯おかわり自由!
とり天やだんご汁を食べていると思わずその味わい深さにご飯が進んでしまうはずです。
心ゆくまでご飯も食べたい人にとってもオススメなのです。


こちらも期間限定で現在は販売を終了している模様なのですが、
どうも毎年この定食は期間限定で販売している模様なので
一度は味わいたい!と言う方はやよい軒の情報をぜひチェックしておいてください。
www.yayoiken.com


来年も素晴らしいとり天に出会いたい

そんなわけで今年はとり天を食べまくっていた年でした。
反省点としては同じものを何度もヘビロテして食べるばかりで新しいとり天を楽しめる飲食店を発掘するのがおろそかになっていたことです。
とり天フィーバー勢としては新しいとり天のお店開拓を怠ることは由々しき事態だと重く受け止め
来年はより素晴らしいとり天が楽しめるお店を発掘していきます。
その布石として、最後に私が最近見つけたとり天好きはブクマ推奨なサイトを載せておきます。

とり天ワールド ☆☆☆ 鳥天、鶏天、トリ天、とりてん、toritenの専門サイト

(「TORITENで世界の平和を!」 素晴らしきとり天ガチ勢ですね)


※この記事は「今年食べた最高のご飯の写真Advend Calender」の9日目の記事としてお送りしました。
adventar.org

電車の中で一目惚れしたあの子(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