GRAND FRONTEND OSAKA 2016 大反省会

2016年9月24日

chatboxの後藤知宏です。

8月 27−28日の2日間かけてGrand Frontend Osaka 2016 というイベントを開催してきました。

開催から1ヶ月ほど達、いろいろと落ち着いてきたので個人的なKPTをまとめていきたいと思います。

GRAND FRONTEND OSAKA2016 スタッフ・デザイナーとして振り返り

2016年9月23日

こんにちは。chatboxでデザイナーをしております、Yasui Risaです。
8月27、28日の2日間かけて行われた「GRAND FRONTEND OSAKA2016」のスタッフとしての反省ブログになります。

イベントそのものやスタッフブログはありがたいことに他の方が書いてくださっているので、
私は今回スタッフとして参加し、光栄にも広報物のデザインを担当させていただいたので、
その視点を活かし、デザインに関すること中心でこの記事を書いていこうと思います。

はじめてのイベント関係のデザイン

以前に、IT系勉強会イベントのデザインをした経験が一度ありました。
今年3月に行われた「FRONTEND CONFERENCE2016」にて
WEBサイトのメインビジュアル(サイト全体はちがう方のデザインです)と、パンフレットのデザインを担当させていただきました。

160923blog_fc2016

この時は本当に経験もなく、どうしたら良いのかもサッパリわかっておらず、
はじめはパンフレット制作の話もなかった状態だったので、
このWEBサイトの上部にはめこむ物として「とりあえず」のメインビジュアルを作ったなーという思い出があります。

そして、メインビジュアルという役割のためのものか、
後々気づいていくこととなります。

メインビジュアルの役割

WEBサイトのために「とりあえず」の作ったメインビジュアルは
「他の媒体でも利用する」という意識がまったくなかったのが大問題でした。
デザインする前に「何のためにデザインするのか」ということを少し考えればわかることだったはずなのですが、
残念なほどデザインの考え方がほぼ身についておらず、全然意識できてませんでした。

この時はじめてデザインの「表現」だけでなく「機能」について考えることができました。
– どんなものに使われるか考えておくこと。
– あらゆる媒体で活用することを予め予測しておく必要があり、展開しやすいものだとなお良い。

という感じでこのメインビジュアルはある意味では失敗から生まれてしまったものだったんですが、
結果的に力技っぽい形でいろいろな箇所に流用できて、うまく収束できて良かったです。

GRAND FRONTEND OSAKA2016のイベントのデザイン

160923blog_gfo2016

そんなこんなで失敗経験もあり、今回のGRAND FRONTEND OSAKA2016では、
まずは、できるだけ色々な媒体に展開しやすいデザインを心がけました。
展開しやすいデザインとして行ったことを具体的に言うと、全体としてまとまっているのはもちろんですが、
それぞれのパーツに切り分けても使えるように組み合わせを意識して作成しました。
(幾何学っぽい模様、ビルのビジュアル、色、尖った感じ、斜線の表現)
こうしておくことで、パンフレットやイベントTシャツ、ステッカーのデザインが作りやすかったです。

もうひとつ、「印象に残りやすくすること」を大切にしました。
イベントでは集客や開催前の宣伝が重要になるので、
一度見た時に強い印象を残すことって大事だと思いました。
具体的な施策としては、「色」に着目して強い印象を残すことを試してみました。
GRAND FRONTEND OSAKA2016は、「なんか黄色と青でパキッとしたビジュアル」で記憶してもらってるんじゃないかな〜と思います。
人に覚えてもらいやすく、他の人にも伝えやすいものを意識して制作しました。

そして、どういう考えでそれぞれのパーツにが組み上がったかとか、色を選んだのかという部分では、
「最先端の技術」というテーマを頂いていたので、そのイメージだったり、
「会場」とか「IT」とか「夏のイベント」とか、イベントに関連する言葉をヒントに自分なりに組み立てて今のビジュアルになったという感じです。

反省

という感じで、反省を活かしながら今回のデザインをさせていただいたものの、
印刷物にミスがあったり(本当に申し訳ないです><)、
今回のイベントでは他に見ないハッカソンがあったのですが、
その点に関してもっと広報物で主旨などをわかりやすく伝えることができたんじゃないかなーと思ったり、
WEBサイトのCSSでは登壇者のKiteさんから鋭い指摘を頂いたり(光栄)、
もっとビジュアルのクオリティあげれないものかなーとか、
まだまだ反省する点はもりもりとあったので、次回もチャンスが有ればどんどん活かしていきたいと思います!

未熟ながら精進しますので、チャンスをやってもいいぞ〜という方がいらっしゃったら
ご連絡くださると嬉しいですm(_ _)m

LaravelにおけるDI 〜 PHPカンファレンス関西2016 登壇レポート

2016年7月16日

7/16 に開催されましたPHPカンファレンス関西 2016にて 「Laravel におけるDI」というテーマで登壇してきましたので、そちらのレポートになります。

Sketchy Talks #1 CSSについて学ぶに参加

2016年6月24日

Sketchy Talks #1 CSSについて学ぶに参加しました。

株式会社chatboxのデザイナーYasuiRisaです
2016/06/10に開催された、「Sketchy Talks #1 CSSについて学ぶ」という全員発表型のイベントに参加しました。

全員発表型ということで最初は緊張していましたが、
少人数のイベントのだったため、質問もしやすい感じで、
どの発表後もたくさん質問が飛び交ってみんなで疑問を解消したり、考えを提案したりと
とてもフランクな雰囲気の勉強会になりました。

登壇者枠ではあまりお見かけない方のお話も聞けてよかったな〜と思いました。

発表/発表者リストはこんな感じ

  • CSSアニメーション はじめました @てつ さん
  • CSS のfilterについて紹介と試してみたことなど @yasui821(私)
  • CSS設計とスタイルガイド @小畑タカユキさん
  • ミニマムなCSSフレームワーク @maki_saki さん
  • 案件規模と拡張CSSのベストな関係について @lyca さん
  • コンポーネント設計のアイデアの活かし方について考えてみた @ShioriShono さん
  • CSSにおける「詳細度」とは何かを説明してみる @mikakane さん

自分の発表

CSS のfilterについて紹介と試してみたことなどお話しました。
ざっくりですがQiitaに上げました。
http://qiita.com/yasui05821/items/01d47f572a5f1a88036a

発見だったのは
– fillterはテキストにも反映されること
– 影の表現であるdox-shadowプロパティとfilterのdrop-shadowとの違い

あと、1つのプロパティに追求するとより表現の幅が広がったり
ちょっとトリッキーなコードが浮かんだりするきっかけになるのかなと。
結構調べてて楽しかったです。

他の方の発表のメモや感想など。

CSSアニメーション はじめました @もりてつさん

CSSアニメーションとvelocity.js両方使いながら触ってみた感想などのお話。
結局のところ使い分けに関しては作るサイトや個人の好みかもと感じました。

CSS設計とスタイルガイド @小畑タカユキさん

http://www.kobatatakayuki.com/entry/2016/06/11/112621
スタイルガイドの事良く知らなかったのですが、
FrontNote
Aigis
こんなツールがあるんですね。
ガイドの定義は考え方としてチームで共有する際に頭に入れておくべきだと感じました。

ミニマムなCSSフレームワーク @maki_saki さん

ミニマムなCSSフレームワークを幾つかご紹介されていました。
中でもSkeletonとのこと。
マークアップだけでかなり綺麗な見た目に仕上がってました。
Bootstrapは管理が大変ですが、Skeletonは管理しやすそうでした。

案件規模と拡張CSSのベストな関係について @lycaさん

新しい技術投入に関する会社やチームのあり方であったり、
携わるメンバー全員が納得のいく進め方で運用を回すことの難しさ等のお話や相談でした。
お話し聞いてると社内の体制が1番改善しなきゃいけないところのように感じました。
あと、ちょっとずれてるかも知れないんですが、
個人的に感じたのは勉強会って考えたこと発表するだけじゃなくて相談としての
活用法もあるよねということを再認識しました。

コンポーネント設計のアイデアの活かし方について考えてみた/ ShioriShono さん

http://qiita.com/shosho/items/7b7d38299bdb378bf3d4
設計についてベストを尽くそうといろいろ考えすぎても時間がかかってしまうのにはすごく共感しました。
まずは「予測しやすい」こと「再利用しやすい」の2点ぐらいを意識することが大事。
参考にされていた図書=Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

CSSにおける「詳細度」とは何か / mikakaneさん

http://qiita.com/mikakane/items/38a94864d2da1cd858e9
詳細度グラフがガタガタになると良くなくて、右上あがり状態が望ましいとのこと。
Sassの入れ子の乱用はできるだけ避けて、@mixinをうまく活用するのが良さそう。
OOCSSやBEMの考え方が重要になってくる。

二回目はjQueryについて学ぶ、をテーマに開催予定

2回目の開催も決定したようです。テーマは「jQuery」。

レベル高い勉強会だと「こんなこと話したいけど…」と尻込みしてしまうけど
他の勉強会と比べて話しやすい勉強会なので話してみたいなって方こそ
ぜひぜひ参加してみてください〜

Sketchy Talks #2 jQueryについて学ぶ – connpass

PHPライブラリCarbonについてちょっと勉強&発表してみた

2016年6月23日

こんにちは。
chatboxエンジニアのショウノです。

昨日は株式会社TAMさんのコワーキングスペースで行われた関西PHP勉強会で発表してきました。
今回発表した内容はPHPライブラリの「Carbon」。
私が普段の業務でよく使っているLaravelにも標準搭載されています。

Carbonでできること

CarbonはPHPのDateTimeクラスを継承したライブラリで

  • 世界各国の時間を表示できる
  • 国ごとの時間表記に合わせて時刻表示をしてくれる(国によって微妙に違ったりするので結構めんどくさい)
  • 日付で足し算や引き算ができる
  • 時差の計算もできる
  • 「今月の第二火曜って何日?」とかもできる

などなど、時刻に関するいろんなことがサクッとできちゃうわけです。

そんな便利なCarbonですが、まだまだへぼへぼエンジニアの私は
「そんな新しいこといっぺんに覚えられるほど賢くないわっ!(おこ」
と放置してましたので、今回の勉強会を機にすこ〜しだけ勉強してみたわけです。

勉強したのはほんの一部ですが、使ってみるとやっぱり便利。
スライドでも紹介したような「足し算」「引き算」「比較」だけでもかなりいい感じです。

タイムゾーンのはなし

質疑応答の時間ではタイムゾーンの話になりました。
今回の発表にあたってComposerでCarbonをインストールしていろいろ試していると、日付は合ってるのに時間がおかしい。
いろいろ調べてみるとどうやら私の使っているphpの設定ファイル(php.ini)のタイムゾーンがスイスのチューリッヒになっていることが原因でした。

「なぜチューリッヒなんですか?」という質問には「し・・・知りません」と言ってしまいましたが(笑)、どうやら私のphp.iniを作ってくれた人(別に私のためだけに作ってもらったわけじゃないですけど)がスイスのチューリッヒにいたらしくタイムゾーンも設定されていたとか。

これを日本時間に合わせたいときはphp.iniのタイムゾーンを「Asia/Tokyo」にしてもいいんですが、そうすると環境が違うとやはりそれぞれのphp.iniのタイムゾーンに依存するので業務では好ましくない。
なので、実際の業務ではLaravelなどのフレームワークのタイムゾーンを設定するのが良いだろう!というオチになりました。
(ちなみにLaravelのタイムゾーンはconfig/app.phpに書いてます)

発表をおえて

内容はうっすいうっすいものでしたが、私的には「Carbonって難しくないなぁ」ということがわかっただけでも大きな収穫だと思っています。
自分の知らない事を新しく学ぶ時っていつも「うわ〜難しそう」と身構えてしまうのですが、大体は簡単なことからちょこちょこやっていけば1つもわからないことなんてそうそうないので、これからもちまちま努力しようかなーっと思います。

関西フロントエンドUG 「WebデザインとUX について考える」についてのまとめのまとめ

2016年5月29日

どうもエンジニアの若井です。

KFUG主催の「WebデザインとUX について考える」という勉強会に参加してきました。

最近のWeb制作におけるWebデザインやUXをテーマに、
フロントエンドでWeb制作を行う人達があーだこーだ技術共有したりするそうです。

ブログ記事が結構上がっているので、まとめブログとして書いていきます。

【レポート】Lec Cafe Laravelで作るRestAPI設計

2016年5月28日

Photo 5-28-16, 17 45 37

参加してまいりました!はなちゃんです。

Laravelで作るRestAPI設計ということで、今回も初心者の方からわかりやすくできるように講義をしてくださいました!!

【勉強会レポート】WebデザインとUX について考える

2016年5月19日

こんにちは。エンジニアのショウノです。
相変わらず文章を書くのは苦手ですが、やらなきゃ克服できないので書きます。

UI・UXめっちゃ人気みたい

5/14に開催された今回の勉強会はサイボウズさんの大阪梅田オフィスで開催されました。
そして参加者枠は25人のところに52人と応募多数。

気になる登壇内容

おっぱいから見るUI/UXとPELSONA

  • UI(見せ方)をよく理解している女性・UX(利用者)側の男性として考える
  • UI・UX・ペルソナの3つを始点につくったものを出し合って、みんなで話し合うこと
  • 同業のものをとにかくあつめる
  • テストは大きな問題が発生しない程度でためす

「男性側の友達との会話でも使用する(?)ところまでがUX」
男性陣はそんなことをしているのか(笑)という発見と同時にうまくUXを説明してらっしゃるなーと。
3つを始点として作り、あとで話し合って決めるという考え方はUI・UXを考えるときだけでなく頭にいれておこうと思いました。
段階やパーツに区切って試しながら進める方が圧倒的にいい成果が得られるし、複数の可能性を比較することで本当に優先するべきことが見えてくるなぁと思うからです。

イラスト制作とデザインに共通する表現技法

  • ちょっと意識するだけで伝わり方が変わる

うちのデザイナーのセッションです。
自分が実践するなら気をつけないといけないなーと思ったのは、その手間のかけ方とタイミング。
以前既存のホームページを模写して、デザインも少し変えてみたことがありました。
作業しているといろいろと欲が出てきてしまい、「ここをもう少し大きくしてみよう」「ここの色も変えてみよう」と模写作業と同時並行でアレンジしたため、ぐちゃぐちゃになってしまい全体を整えるのが大変でした。(笑)
私自身は「ちょっとした手間」は最後にしたほうがよさそうです。

初期導入と記憶の利用(plum_shigaさん)

  • 基本記憶はマジすぐ忘れる
  • 覚えるにはまとまりごとにすればおぼえやすい

”まとまり”にすれば覚えやすいというのは言われるとなるほどなーと。
「JXY AMK KQP」だと厳しいけど「JAL BOY KICK」だと見覚えのある単語だから全部のアルファベットを覚えられる。ふむふむ。

UI記述言語としてのHTML

リンク先はこちら

  • htmlのbuttonとかもちゃんと使うといいよ

htmlを書くときについついdivなんかを使っちゃうけど、buttonとかだと「押せる感じ」とかいろんなオプションを勝手につけてくれるしいいんじゃないか、というようなお話。
なんでもかんでもdivを使いがちだったんですが、divって無駄な要素がついていないぶん好き勝手カスタムしちゃって「このdivってどう設定したっけ?」「同類の要素なのになんか微妙に違う!」って私はよくなります。
なので最近はそれぞれの要素の使い道を考えて”適材適所”を意識するようにしています。
pタグなんかも勝手にmarginがつくのが鬱陶しいなーと前は思っていたんですが、ルールを決めてプロパティを解除すれば同じ要素の変更箇所は同じになるのでメンテナンスしやすいコードになるんじゃないかと今は思っています。

UXを損ねる静的コンテンツ配信アンチパターン

  • ちょっとしたことでユーザーの満足度を下げるのはもったいない
  • ちょっとしたことに気を配ってるサービスってなんかイケてる
  • ちょっとだけ手間をかけて、良いUXを提供しましょう!

私は細かいことを気にし始めるとドツボにはまり終わらなくなるのでとにかく形にすることを常々心がけるようにしています(笑)
でもこの3つは絶対に大事なんですよね。
だって自分がユーザーだったら同じ内容のサービスなら絶対使いやすい方を選びますもん。
なのでサービスを作るときには「ちょっとした手間」をかける時間も制作時間内に組み込んで考えないとな、と。

正解のないデザインについて、それでも正解について考えてみる

  • UI・UXは正解(に限りなく近い)ことがある、がデザインにはない
  • デザインに正解がない理由は「結局好み」「結果の計測が難しい」
  • デザインを作る上で大事なのは「目的を明確にする」「ユーザーの視点に立つ」「理由を持つ」

自分でしっかりと考えること、他者にきちんと説明できること、他の正解の可能性も考えること。
どんな職務の人でもこれができる人はすごく強いし、この3つがあれば何でも解決できるんじゃないか。
そんなことを考えました。もちろん内容も素晴らしかったです。

制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-
(コソバマイさん)

  • ゲームを作るときにはページ遷移が嫌われる
  • 太宰メソッド

ゲームの製作ではわりとなんでもhoverが好まれる、というのを聞いて確かに!と。
あと「独りよがりになっていない?」と自分に問いかけるようとも思いました。
太宰メソッドという言葉は初めて知りましたが、これも気をつけないとなぁ。
気になる方は調べてみてください。

人類の進化とデザイン

  • 人類は200万年前から何も変わってない
  • 考えることを続けよう

ほんわかしたスライドで軽めの内容、ということでしたがすごく良い視点だなと思いました。
同じ人間でも「20年前に生まれた人の感覚」と「今日生まれた人の感覚」にも違いはあるはず。
このことを仕事でも、日常生活や人との関わりの中でも忘れたくないです。

WebアプリケーションとWebサイトのデザインの違いからみるCSS設計

  • いろんなCSS設計のノウハウがあるけどそのコーディングに必要なのかを考えてみよう

様々なCSS設計のノウハウがありますが、あまり意識したことがなかった私。
(体系的に書くようには心がけていますが)
こんな人が々なCSS設計を試してみるのは大事かなと思うのと同時に何でもかんでも覚えたCSS設計を使うのではなく、”適材適所”で使えるようにならなきゃ意味ないな、と思いました。

感想

今回の勉強会で私が大切にしようと思ったのは次の4つです。

  • 適切なペルソナの設定(方向性がぶれなくなる、期待する成果が得られやすくなる)
  • ちょっとした手間って結構重要(この差がユーザーの体験にわりと大きな影響を与える)
  • 取捨選択をすること(素晴らしい技術も場合によっては悪となりうる)
  • よくよく考えること(必要なものは何か、と頭の中をシンプルにしていくような感じ)

登壇者のみなさま、ありがとうございました!

laravel.osakaで初登壇しました。

2016年4月22日

エンジニアのショウノです。
本日開催されたlaravel.osakaにて初登壇を果たしましたのでその報告です。
 
PHPカンファレンス北海道でもセッションがいくつか行われたような大人気フレームワークLaravel。
私みたいに「Laravel使ってるけどまだまだ使いこなせてないよー」という人もいるはず。(希望)

そんな人でも参加しやすいコミュニティがlaravel.osakaで、月1回勉強会が開催されています。
初参加ですが、参加人数が少なめだったので「ここなら怖くない!」と登壇しました(笑)
内容は公式ドキュメントを訳した感じですが、それでも「発表するのって難しいなー」と思いました。

 

(コードが見にくいので拡大してください)
 

なんとなくわかってるような気がしていても、説明しようと思うとなかなか言葉が出てこなかったり。
スライドのコードと説明が食い違っていたり。
発表しているうちに「間違ったこと言ってないかな・・・」と不安になってきたり。
それでもみなさん温かい目で見守ってくださったおかげでなんとか乗り切れました。

今回の発表での反省点は、ひとまず「発表に慣れたい」というのがあるので
・ コードの文字が小さかったこと
・ スライドをノートのようにつくってしまったこと
の2つかな〜と思います。

しばらくは場数を踏もうと思っていますので、関西の勉強会で見かけたらどうぞ宜しくお願いします。
そしてみなさん一緒に登壇しましょう!