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

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

2016年5月29日

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

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

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

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

【勉強会レポート】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つです。

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

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

初心者でも気軽に参加できる「もくもく会」って?

2016年4月13日

始めまして。エンジニアのショウノです。

関西フロントエンドUG(KFUG)が月に一度主催する「もくもく会」。

「勉強会って参加したことがないから想像がつかない・・・」
「初心者歓迎って書いてあるけど、本当かな?」

と思ったりしている方にもいらっしゃるかもしれません。

そこで今日は実際のもくもく会の雰囲気をお伝えしようと思います(^ω^)


会場はいつも扇町のTAMさんにお借りしております。

OLYMPUS DIGITAL CAMERA

実は今回からちょこちょこ主催者が変わるようで・・・
本日はかのスライドで脚光を浴びたpotato4dくん。

OLYMPUS DIGITAL CAMERA

知る人ぞしる、漢は黙ってjQueryの彼です。
しっかりともくもく会を取り仕切ってくれました。

各自、自己紹介と今日やることを一人ずつ宣言して(遅刻したので写真がない・・・)
今日もみなさんもくもく開始。

OLYMPUS DIGITAL CAMERA

ときには相談しあったり

OLYMPUS DIGITAL CAMERA

お菓子を食べたり(夜だけど)

OLYMPUS DIGITAL CAMERA

そんな感じでいい感じのゆるさの中、約2時間もくもくしました。
最後は各自、進捗状況なんかを報告します。

OLYMPUS DIGITAL CAMERA

プロジェクターも使って「これってどうよ?」なんて聞いてみたり。
(ちょいちょい映らないこともあるけど)
「隣の人に教えてもらって困っていたところが解決できましたー」という方もいて
今日もみなさん有意義な時間を過ごされたようです。


もくもく会は雰囲気は伝わりましたでしょうか・・・?
「最近プログラミング始めたばかりなんだけど、周りに聞く人がいなくて困ってる・・・」
という方はもくもく会に参加すればサクサク進むようになるかも♪

KFUGでは他にも「もしゃもしゃ会」も月に一度開催しております。
気になっている方はぜひ一度参加してみてはいかがでしょうか?(^^)

OLYMPUS DIGITAL CAMERA

KFUG 3月 もくもしゃ会 参加レポート

2016年3月23日

3月21日に大阪扇町にある株式会社TAMさんのオフィスで 関西フロントエンドUGのもくもくもしゃもしゃ会が開催されました。

FRONTEND CONFERENCE 2016 を開催してきました

2016年3月16日

2016/03/05 大阪梅田の新梅田研修センターと言う所で、FRONTEND CONFERENCE 2016 というイベントが開催されました。

イベントのメイン企画を通じて、深くこのイベントに携わってきたので、開催までの道のりなどかいつまんでお話しようと思います。