2013年2月1日
カテゴリ： イベント
第3回 福岡マークアップ勉強会に参加してきた。
もう1週間経ってしまいますが、周回遅れの参加レポート。
このまま書かずに終わってしまうのかと思ったが書く！書いとこう！金曜の夜に！飲みにも行かず！飲みにいく相手がいないとか言わず！
場所はおなじみAIPカフェにて。
デザインの話し、マークアップの話し、プログラミングの話し、そして便利なショートカットの使い方とかWeb制作全部載せの盛りだくさんの内容でした！
プログラミングのお話し
@kecy_さんのPHPのお話。
PHPの処理の流れから始まり、フォームの動作の流れとか変数の定義のしかたとか。
PHPの基本的な部分を丁寧に解説。
僕みたいにコピペでなんとかのりきってそしらぬ顔してる人間からしたら、こういう基本的なことでも丁寧に説明してくれると自分の理解の再認識でとても助かる。
GET、POSTの違いやファイル読み込みのしかたまで説明したところで、実際にデモサイトで問合せフォームからメールを送ってみてちゃんとプログラムが動作することを確認。
デモサイトまで作ってなんて丁寧なんだ。。。
コンテンツ内容はめちゃ適当だったけどｗ
内容と関係ないけど@kecy_さんめっちゃ緊張してたから、僕はとってもためになりました！いけるいけるー！がんばれー！とインターネッツの片隅から応援しておきます。周回遅れだけど。
デザインのお話し
@naminyさんのデザイン、というか某大きな会社さんの制作体制のお話し。
規模がでてる会社がどういう体制で案件すすめているのかとか、いやー、こういうのすごく気になります。分業体制しいてるところのコミュニケーションがどうなってるとかそういうの、僕は制作会社につとめたことがないのですごく参考になるんですよね。
聞いたお話しを差し障りがないであろう程度に書いときます。
体制はプランナー（以下P）、デザイナー（D）、コーダー（C）による分業体制。
Pが仕事持ってくる（Pは営業も兼ねてるのかな？）。そこでDとCも一緒にキックオフミーティングを行う。
Dがデザインを作ったのち、同僚のDさんたちにも意見を求めデザインをブラッシュアップ。ああこういうの組織だとできるよねいいなー。
Cにデザインデータ渡してコーディング。
実際に案件として作ったサイト見せてもらう。綺麗やなー。
基本的にワイヤーフレームはPが作ってDに渡してから大体1日かかりっきりでトップデザイン、見出しなどのパーツデザインが全部出来揃う。1日で。。。？早いですね。。。orz
でもデザインって強弱の付けかたとか、メリハリとか書体選ぶの難しいですねって。それはすごくわかる。もう本当デザインのスピードあげたいです。
結構質問もでてて、PとDとCの連携についてとかも興味深かった。
顧客折衝は基本的にPが行う。ディレクションなどもP。さすがピー。Dがコーディングの難しそうなデザインをはりきって”ピー！”したとしても、Cが新しい技術を”ピー！”したいからオッケーとかお互い向上心をもって円滑に”ピー！”できてるのでなんとも素敵だねおっといけないこれ以上は他社さんのことゆえ自重します。自重はダークサイド。いいたかっただけ。
さらにデザインのお話し
@ta2kickさんのデザインの心構えとかのお話し。
デザインとは！という深い話し。これはすごく考えさせられた。
これだけは絶対忘れないでおこ！と思ったのが、アートとデザインの違いという話し。
「アートは問題提起」
「デザインは問題解決」
これ！かっこいい！名言や！
となるとその問題解決をするために初回の打合せというかヒアリングがすごい大事なわけで。
そこでこれ重宝しまっせと出たのが@mune_noriさんが所属しているアスパラガスさんのヒアリングシート！
これ実は僕もこっちに引っ越してくる前から知ってて本当おすすめ。というのも僕はWEB制作の請負はじめるときにどうやって仕事すすめればいいかもわからず、とりあえずヒアリング項目を決めようということで検索して見つけたのがこのシートなのです。
以来このヒアリングシートの内容をパク…いや参考にさせてもらっていて、なぜか今回のサイトリニューアルでもアスパラガスさんのデザインをパク…いやちょっぴり参考にさせてもらっています。
ちなみにこのヒアリングシートはダウンロードできるようになってます！
で、ヒアリングしっかりするとお客さんが自分でも気づかなかった部分に気づいてくれたり、新たな方向付けがみえたりして、相手のビジネスの根幹的な部分が共有できるようになるということ。
他のお仕事につながったりすることも多く、相手のビジネスと共栄していくことってとっても大事ですね。あとはデザインするときに誰かに説明したくなるストーリーや仕掛けを盛り込むというのはなるほどなーと思いました。
お客さんが自分で話したくなるようなデザインの意味づけができれば、ブランディングにも役立つし、お客さんがブレずにビジネスを行っていくうえでのサポートもできますね。
自分は何をデザインするのか？という問答はこれからも繰り返し行っていこうと思いました。
あと、ロゴのラフ100案とか聞いたときもう死にたくなりました。頑張れ、俺。
マークアップのお話し
@mune_noriさんのマークアップのお話し縮小版。今回はhead内のマークアップのお話し。
まずは文字化けしないように文字コードの設定から。
ごちゃっとしたコードを例にどこを改善していくかお話ししていきます。
改行やインデントも適度に行いましょう。
見やすいコードは思いやりです。
といったあの瞬間、僕は反射的に目を反らし扉の向こうの冬の寒さに思いをはせ、ああもういくつ寝たらあったかくなるとかあれ遠くに行ってた、綺麗なコードを書くことを心がけますすいません。
Webサイトが早く表示されるようパフォーマンスも意識してマークアップしよう！
これ、僕もしっかり勉強しておさえとかなきゃいけないとこだ。
まず他のファイルが同時読み込みできるCSSは最初のほうに書いておくこと。
あとはデザイン時にスプライトシート作ったりすることも高速化に寄与しますとのこと。
でも管理のしやすさとトレードオフになる場面もあるので、パフォーマンスが必要なサイトかどうか判断して柔軟に対応していこう。
スライドは下記からみれます。
俺のhtmlマークアップ【head編】
小ネタ話
そして毎回定番になってる（？）らしい@tamshow_さんの制作TIPSなどのお話し。
Macのスポットライトで計算ができたりアプリが呼び出せたりファイルと同じディレクトリに移動できるよ！とかMac使いの方たちがキャッキャウフフして楽しそうだった。
僕はそれを横目でみてた。
横目でみながらテトリスやってた。キーホルダーみたいになってるやつ。
っていう心持ちで「ドックがなんちゃらでオプション押しながらスライドするとー！」「おおー！」なんて盛り上がったときにはテトリスやってる場合じゃねー早々にMacを買おうと心に強く思いました。Macほしい。あとニンテンドーもほしい。
スポットライトの使い方は@tamshow_さんに詳しいです。
役立つスポットライトの使い方
あと、レコロっていう決めた時間ごとに自動撮影してくれるカメラをPCと同期させる方法とか紹介しててすごく面白かったです。
次期Zen-codingのemmetの実演もちょこっと拝見できました。すっげー便利そう。これ覚えよう。
ツールの使い方とか、いちいち調べるのがめんどうですが覚えとくと便利なことってまだまだたくさんありますね。ちゃんと毎回調べる癖付けよ。。。
というわけでデザイン、マークアップ、プログラミング、制作TIPSと全部のせでとても楽しかったです！次回も参加させていただきます！
今回の勉強会の様子は運営の@kanapple73さんがブログにもまとめてありますのでぜひご覧ください。
第3回 福岡マークアップ勉強会 －kanapple.net
@kanappleさんも某大きな会社でサービスのパフォーマンスをあげるために日々やるかやられるかのギリギリの高速化チューニングにいそしんでるとかいないとか。ぜひそこらへんの話しも聞いてみたいです！
僕も何か話しできたらなーとか考えてますので何かネタをさがしてみます。
気づいたら写真の1枚もございませんでしたが参加レポートでした！
