CSSNite in YOKOHAMAに行ってきました。

みなさん。
お久しぶりです。
久しぶりの更新ですが、みなさんはどうお過ごしですか?
私はと言えば、もうとにかく忙しかったです。
でも風邪をひいて寝込んだ日々も…
おかげさまで見ることも無く溜まっていたDVDが一気に減っていきました。
主に「ヒーローズ・リボーン」を、見たのですが、やっぱり面白いですね~。
しかも思わせぶりな終わり方!
続きは作らないそうですが気になって夜も眠れません!
睡眠不足で辛いので、眠くなる超能力をお持ちの方は是非ご一報ください。

さて、本題ですが、先日の3月18日横浜で行われたCSSNiteに行ってまいりました。
自分へのメモを兼ね、ここにその時の様子を書き残しておこうと思います。

Webの未来と必要な技術

このセッション、すごく興味がありました。
だって必要な技術がわかれば、今後自分がどうしていくべきかなんとなく分かってくると思うんです。
その中で特に興味を引いたキーワードがいくつかありました。

REST

これは、去年辺りからWordPress界隈でも結構話題になっていましたよね。
ちなみにRESTとは、すっごいざっくり説明すると
パラメータを指定して特定のURL(http://www.hoge.jp/?foo=bar)にアクセスするとXML(またはJSON)で応答してくれるやつです!
このRESTを使用すると、様々なシステムでデータを引っ張り出してきて表示することが出来るとのことでした。
コンテンツとテンプレートを完全に分離できるので、上手く使うと工数の削減にもなりそうですね!
私も業務でRESTを使用する機械を虎視眈々と狙ってはいるのですが…今のところその機会には恵まれておりません。
どこかに無理やりねじ込んでみようかな!

画面がなくなる。

アマゾンダッシュボタンやアマゾンエコーと言うサービスはご存知ですか?
アマゾンダッシュボタンは、ボタン一発でアマゾンの注文が完了するという、すっごい便利なサービスです。
そして、アマゾンエコーは、アマゾンの人工知能を搭載した、音声を認識して色々な操作を実行してくれる音声認識ユーザーインターフェースです。
アマゾンでの注文はモチロンの事、あらゆる質問に応えてくれる(ググって教えてくれてる)し、IoTが進んだ環境ではほんとになんでもできちゃいます。
人口知能ということでどんどん成長していくらしいですが、いずれは、人生のお悩み相談なんかもしてくれるのでしょうか?
日本での発売がとっても楽しみです。
そして、これらに共通するのは、画面が無いと言うこと。
検索も、買い物も、画面を見る必要が無いんです!
これによって日本人のメガネ人口増加率にやっと歯止めがかかるかもしれません。

Riot.js

Reactで決まりかな!?と思っていたJSのフレームワーク業界ですが、またまた出てきました新しいフレームワーク。
ReactとPolymerの良いとこ取りで、使いやすいとの事でした。
個人的にはVue.jsも捨てがたいと思うのですが、一体どれが生き残るのでしょうか?
今後の動向を注視せずにはいられません!
あと、Ajax通信が簡単にできるFetch APIも試してみたいな。

そして、これらの他にも解析ツールのお話とか、色々と伺うことができてとても為になりました。

制作会社だからできること Google アナリティクスもう少し踏み込んでみませんか?

こちらのセッションではGoogle アナリティクスの使い方の流れをざっと紹介していただきました。
実際の仮想案件でどう見ていくかご紹介いただき、ライブ感があってとてもわかりやすかったです。
でも折角のこういった手法も、私の担当業務ではあまり活用できる機会が無くて…
だれかアクセス解析して欲しい方、いらっしゃったら是非ご一報を!

あと印象深かったのは、マイページをクライアント用に作ってあげると喜ばれると仰っていた事です。、
恥ずかしながら、私にはそんな発想はまったくありませんでした…
確かに、しっかり作ってあげたら見やすくて重宝しますよね!
今度から必ずやるようにしたいなって思います。

Web制作を行う上で押さえておきたい差分とキャッチアップ

「アートはテクノロジーにインスパイアされる」
このセッションで紹介されていた、ジョン・ラセター(ピクサー)という方のお言葉らしいです。
どんどん発展していくウェブの技術ではありますが、
この先にいったい何があるのか?なんだかすっごい楽しみになる言葉。
ピクサーが言うんだから間違いない!
AIに仕事取られるとか言う人もいますが、そんな事考えてたって仕方ない!
そもそもAIについてそこまでよくしらないし、そう言ってる人はだいたいディープラーニングっていう単語すら知らないし。
取られないように、日々自分を磨くだけですね!

さて、こちらのセッションでは、主にフォントのお話と、Photoshop、Illustratorについてのナウい使い方をご紹介されていました。
その中でも特に為になったのは画像の切り抜きです。
恥ずかしながら、私は未だに、マグネット選択ツールで頑張っていました。
ところがどうしたことでしょう。
今回ご紹介いただいた、「選択とマスク」を使用すると、爆速で、しかも綺麗に切り抜けるんです!
髪の毛みたいに複雑な部分も大丈夫!
今度から使ってみようと思います。

Webデザイントレンド

さて、最後のセッションになりました!
このセッションは、独自の視点でデザインのトレンドを追っている、原さんのセッションです。
まず、初めに「トレンド」に対する定義がありました。

「トレンドとは最先端ではない時代に最適化されつつある現象である」

うーん。確かにその通り!ついつい、最先端をトレンドだと勘違いしそうになりますが、
そんな時に思い出したいお言葉です。

そして、このセッションのすごいところは、そのサンプル数。

グローバル企業のサイト:400
海外で話題になったサイト:6000
上場企業のサイト:3400
自治体のサイト: 1700

これだけのサイトを見ているそうです。
興味と根気がないとあっという間に挫折してしまいそうですね!
去年のデータとの比較もあって、デザインの動向がとてもわかりやすくまとめられていました。
来年も是非お願いします。

と言うわけで、以上が感想です。
初めてのCSSNiteでしたが、懇親会にも参加させていただき、とても面白かったです。
また参加させていただければと思いますので、もしお会いすることがありましたら、どうぞよろしくお願いいたします。

HTML5感に行ってきました

こんばんは。
akitoです。

この前の土曜日、私は

「HTML5感 ~HTML5の最新動向と明日から活かせるHTML5のあれこれ。~」

なるものへ参加してきました。

その日は朝5時起き!
長野からバスで東京に向かいます。

バスの中ではひたすらに寝て体力を温存。
約3時間で新宿に到着しました。
そこから電車に乗って会場へ!

しばらく席でおとなしくしていると、早速最初のセッションが開始されました。

 

ディスプレイの中のバーチャルな世界からリアルな世界に広がるHTML5

このセッションでは、web以外で使われているwebの技術について色々と面白いお話を伺う事ができました。
特に、

・ラズパイにnodeをインストール出来ること。
・JavaScriptで制御するIoT向けマイコン「Puck.js」なるものが登場している。
・Eddystone(ビーコンの規格)

この辺りの話が非常に面白かったです。
JSで出来ることがどんどん増えていて、自称フロントエンドエンジニアとしてはとてもワクワクしてきますね!

 

プロジェクトを殺さないCSS設計

このセッションでは、CSSの設計方法論について色々とお話を伺うことができました。
大体知っている内容ではありましたが、自分の知識の再確認と言う意味ではとても良かったと思います。
ただ一つ、セッションの中で出てきた「Enduring CSS」は初耳でしたが…
この手法はざっくり言うと、CSSのファイルをページ毎に管理して、
フォルダ構成もHTMLと同じにするというものです。
私もたまに使う方法ですが、こんな名前が付いていたんですね。
知りませんでした…
HTML5 Web アプリケーションのセキュリティ・マネジメント編
内容はさらっとセキュリティについて、フロントエンドから、バックエンドまで含めてお話を聞かせていただきました。

参考書などをご紹介頂いたので、いずれ読めたらと思います。

 

SCSSの関数機能を利用した効率的なCSS作成

このセッションではSCSSについて色々とお話を伺うことができました。
こちらも大体は知っている内容でしたが、今まであまり使うことの無かった関数についてのお話もあり、少し思考の裾野が広がった気がします。
あと、Sassのフレームワーク、compassについてのお話もありました。
compassはもう更新が止まって古くなってきており、最近はbabbonが使われる事が多くなってきているとのこと。
うん、知ってます…知ってますとも…
でも私の開発環境では、今日も変わらずcompassが入っております。
特に不便は感じてないし、切り替えるのが億劫で…
でもcompass使ってると新しいPCで開発環境を作る時が大変なんですよね。
特にMAC!
アップルIDを取得して、Xcodeコマンドラインツールをインストールしたりしないといけません!
これがなかなかにめんどくさい!
もういい加減Bourbonに乗り換えたいと思います!!

 

HTML5を使った開発にも役立つVisual Studio Code

このセッションは、マイクロソフトのテキストエディタ「Visual Studio Code」についてのお話がありました。
その中で気になったのは「PlantUML」についてのお話。
UMLとは、システムのデータ構造や流れを簡単に図表にするための記法らしいです。
この記法が、Visual Studio Codeも対応しているとのことでした。
これは結構使えそう!
と思ったのですが、私が普段使っているatomでも同じ事が出来るぽい…
この為にインストールする必要は無さそうです。
でもatom重いから…
軽かったら、乗り換えてみるのもいいですね!

 

 

以上の5セッションが終わり、待ちに待ったビアバッシュです!
ピザは美味しかったし、色々な人とお話させていただきとても楽しかったです。
そして、次回はなぜかLTで登壇することに!?
緊張してうまくしゃべれるか心配ですが、ネタ探しておきます。
登壇者やスタッフのみなさん。どうもありがとうございました!

パーソナルカラー診断

こんにちは。akitoです!
皆さんはオシャレしてますか?
ちなみに私はあんまり気にしておりません!
家にある服をなんとなーく着ています。
先日なんて、3年ぶりに会った知り合いに
「前も同じ服装してたよな!」
と言われてしまった始末です。

これはいかんなーと思っていたら、会社の企画で自分のパーソナルカラーを調べる事に。
でも、いきなりパーソナルカラーって言われてもなんだかよくわかりません。
そこで、ちょっと調べてみました。

 

パーソナルカラーとは

パーソナルカラーとは、唇や瞳、肌の色等と調和して、その人に最も似合う色を指します。
そしてパーソナルカラーを使ってコーディネートをすると、血色がよく見えたり、小顔に見えたり、健康的に見えたり、
メリットがいっぱい!オシャレも捗りそうですよ!

そして、パーソナルカラーは、大きく分けると明度、彩度により
「春タイプ」「夏タイプ」「秋タイプ」「冬タイプ」の4種類に分けられるそうです。

春タイプ

イエローベースで高明度・高彩度

明るい色調で可愛らしい印象を受ける色がほとんどです。
春の新緑や、草花、桜などをイメージさせますね。

夏タイプ

ブルーベースで高明度・低彩度

涼しげで柔らかい色調です。
真っ青な空や海、スイカやメロンに草花など、夏を連想させる色ばかり!

秋タイプ

イエローベースで低明度、低彩度

深みがあって洗練された色調です。
鮮やかな紅葉や、木々の色、広大な大地をイメージさせますね。

冬タイプ

ブルーベースで低明度・高彩度

原色に近いはっきりとした色がずらっと並びます。
クールでシャープな印象ですね。
真っ白い雪や、かき氷のシロップの色!
ちなみに日本人にはほとんどこのタイプはいないんだとか!

そして私はと言うと夏タイプでしたー!
その中でも特に私に似合うのは「ラベンダー色」とのことですが…
そんな服持ってないよ!
実はこのパーソナルカラー診断。
会社のサイトにスタッフ写真を載せることになりまして、その為の診断だったわけですが…
このままでは当日着てく服がありません!
ただ遊んでいただけになってしまいます!
今季の査定が怖すぎる~。

これはもう買うしか無い!

と言うわけでこれ買ってみました。

ちなみに使ったサイトはこちら

まだ届いていないのですが、本当に私に似合うのでしょうか!?
今からとっても楽しみです!

最新のweb業界の情報をキャッチアップできるサイトまとめ

こんばんは。akitoです。
みなさんはウェブ業界の情報はどうやってキャッチアップしていますか?
次から次へと新しいものがでてきて訳がわからなくなっていませんか?
実は私もその一人です。

そこで、今のトレンドを知るために、良さそうなサイト、よく見ているサイトをまとめてみました。

デザイン(ユーザー投稿型)

Behance


https://www.behance.net/

あの!Adobeが運営している自分の作品プラットフォーム。
世界中のクリエーターさんが、色々なデザイン投稿されてます。

AWWWards


http://www.awwwards.com

こちらも投稿タイプのサイトです。
Adobeと違うのは投稿されたサイトが様々な観点から採点されているところ!
とても参考になります。

JAYPEG


https://jypg.net

国内のポートフォリオサイトです。
ウェブサイト自体からUIのデザインまで色々あります。

デザイン(ギャラリー型)

I/O 3000


http://io3000.com/

国内外の素敵サイトがいっぱい載ってます。
余計な情報が一切なくてすっきりしていてとても見やすいです。

Responsive Web Design JP


http://responsive-jp.com/

国内のレスポンシブデザインのサイトが色々載っています。
実際にサイトに遷移せずとも、画面キャプチャーがあって見やすいですね。

JS、CSS、WordPress

CAPITAL P


これを見るだけで、WordPressの最新情報をキャッチアップできます!

webOpixel


http://www.webopixel.net/

Wordpress、jQuery等についての情報が色々と載っています。

CodePen


https://codepen.io/

JS、CSSのコードが色々載ってます。
見ているだけでなんだか、心が踊ります!

jsdo.it


http://jsdo.it/

こちらも色々なコードが載ってます。
国内のサイトなので、英語が分からなくても安心ですね!

Codrops


https://tympanus.net/codrops/

CSSやJSを駆使したデザインサンプルが多数あります。
こちらも心が踊ります!

その他

U-Site


https://u-site.jp/

こちらはUX設計やコンサルティング等について様々な考察が載っています。
ディレクターの方は必見ですね!

could


http://www.yasuhisa.com/could/

こちらもUX等について深く書かれています。

かちびと.net


http://kachibito.net/

便利なツールやサービス等、幅広く色々な情報をキャッチアップできます。

あきとの成分早見表

こんばんは。
あきとです。

昨日からブログを書き始めましたが、まずは私の自己紹介から書きたいと思います。
あきとはこれらの成分から出来ている!

 

成分1 仕事

一年前に東京から長野県に戻ってきて、とある会社でウェブサイト屋さんをやっています。
フロントエンドエンジニアをやっていましたが、今の会社に入社してからは、
ディレクションもするし、バックエンドも触るし、マーケティングやら、アクセス解析やらたまにちょっとデザインもしたりで、なんだか色々やってます。
でも心は今も昔もフロントエンドエンジニア。
HTML、CSSの乱れは心の乱れ。
今日もソースコードの乱れと戦っています!

 

成分2 好きなもの

・Perfume

家でも職場でも運転中でも就寝中でもずっとずっと聞いています。
かれこれ10年ぐらい聞いていますが、ぜんぜん飽きません。
どうやったら飽きる時がくるのかと、考え込んでしまうくらい飽きません。
でも最近はBABYMETALも結構好き。
最近は24時間ヘドバンしてます。

・須田51

言わずと知れたゲーム開発会社「グラスホッパー・マニファクチュア」の社長さんです!
killer7とか、ロリポップチェーンソーとか、個性的な作品を沢山作っていらっしゃる!
王道ノーマルに飽きた方、アブノーマルが好きな方には彼の作品を是非一度プレイしてみてほしいです。

 

成分3 子供たち

二人の男児の父親でもあるこの私。
休日は自分の部屋に閉じこもって、javascriptの新しいフレームワークとか使って遊んでみようと思っても、
息子二人に突撃されて何もできずに過ぎる日々。
良いんです。
昼は遊んで夜やれば!
子供が子供でいるのは今だけなのだから。

 

成分4 カメラ

昔は風景写真なんかも撮りました。
下北沢で写真展なんかもやりました。
でも最近は子供の写真ばっかりです。
その比率約90%!
愛機はEOS7D MARKⅡ
素直なとっても良いやつです。
以上、大まかに分けるとこの4つ!
きっと今後書く記事も、これらにまつわる記事が中心になるのではないでしょうか!?
どうぞよろしくお願いしますヾ(*´∀`*)ノ

ブログ開設

はじめまして! あきとです!!

ブログを書くのは一体何十年ぶりでしょうか?

ちょっと今日はもう眠いので明日自己紹介兼ねて更新しますね!

おやすみなさい。