vol.4 | イベント一覧 | CSS Nite in Okayama ~Web制作者のためのセミナーイベント CSS Nite の岡山版

イベント一覧

vol.1 明日から使える! Webディレクション術
vol.2 今日から使えるHTML5&CSS3
vol.3 Webクリエイターのための、制作効率アップ術
vol.4 デザイナーじゃなくても知っておきたい、成果の上がるWebデザイン
マルチデバイス対応の最新事情
vol.6 ワンランク上のWeb制作
vol.7 UI/UXから考えるウェブ制作

CSS Nite in Okayama, vol.4 音声・スライド・メッセージ

見えない行動の先へのデザイン

秋葉 秀樹
講師 秋葉 秀樹
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

CSS Nite in Okayama, vol.4に参加されたみなさん、どうもお疲れさまでした。
当日トップバッターでお話しました秋葉です。

セッションの中でもお話した通りですが、用途が多様化しているWebデザインはユーザーに長く使ってもらえる方法を試行錯誤しなければならないことがあります。その試行錯誤の一つで「つくり過ぎずちょっとだけ試す」というスタイルとしてWebベースのプロトタイプで行うための方法を紹介しました。一見「めんどくさそうだな」と思われるかもしれませんが、慣れて自分のスタイルにすることでデザインに根拠を生み出すきっかけになります。このお話がみなさんのWeb制作のこの先において役に立ったらとても光栄です。

Leap Motionのデモの後に「飽きる」と言われてしまいました(泣)。
しかーし!!すいません。。。私の伝え方が悪かったのかもしれませんので補足します。 私が伝えたかったことはLeap Motionではなく、このように次世代のインターフェースを「とりあえず試してみよう」と割と気軽に挑戦できることが可能になりつつある時代だってことです。
そしてこれらのデザインはもちろんHTML+CSSでOKだということです。
これまではサイネージだけで多くの予算が必要だったものも、アイデア次第では割と安価な予算でプロモーションが実現できる可能性に着目しようぜ!ということです。
(大型タッチパネルディスプレイは高額だけどNUIだったら大型テレビとPCだけでいいかもしれない、とか。。。もちろん場合によりけりですが…)

また岡山にはちょくちょく来ますので、今後もよろしくお願いします!!

2013年はWeb制作の曲がり角

鷹野 雅弘
講師 鷹野 雅弘
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

鷹野です。
ご参加いただいたみなさん、ありがとうございました。

また、お会いできる日を楽しみにしています。

実制作で知っておくべき手法やツール

久保木 博
講師 久保木 博
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

参加されました皆さま、ありがとうございました!
「実制作で知っておくべき手法やツール」で登壇しました、久保木です。

今回は内容をかなり詰め込み、制作をされている方を中心としたツールの紹介をしました。
選択肢が多いと選ぶためのコストはかかりますが、使いこなすまでにならないまでも、それで何ができるかを知っておくことは、損ではありません。
また、新しいツールや手法などを使うのは楽しいものです。しかし使うことを目的とせず、なにを使って、どのように効率化し、どれぐらいの時間を生み出せるかを、ぜひ考えてみてください。

早足で進めたため紹介に留まるものが多く、私のおすすめを教えてほしいとのアンケート回答を頂戴しましたので、今回のスライドから私の使用頻度が高いものを紹介します。

ーーーーーーーーーー

カンプを完全につくるということが少なく、どちらともパーツ作りが中心です。

Fireworksは皆さんご存知だと思いますので省略します。Sketch.appは比較的新しいアプリということもあり、動作も軽快でハンドリングがとても良いアプリです。簡易的なマルチページや、スライスなどにも対応しており、スライスのドラッグ&ドロップでの書き出し、スライス内の書き出しに必要なオブジェクトのみを選択して書き出せるなど、気の利いた機能があります。ただし、日本語の扱いは考慮されていない、普及率が低いため編集可能なデータの受け渡しが必要な場合のデータの互換性に問題があるなど、デメリットは小さくありません(業務ではOSがWindowsのため、もっぱらプライベートワークで使用しています)。

CPPを使い始めた頃は、SassとLESSの2択だったため、機能の多いSassを使っています(SCSS記述です)。ただ、機能が多い方が良いわけでなく、逆に機能の少ない方が覚えることも少ないというメリットがあります。 また、CPPの基本ともいえるセレクタの入れ子や変数については、いずれのCPPでも使うことができます。

Foundationをそのまま納品するといったことはしておらず、ワイヤーフレーム作成での使用が中心です。 どのフレームワークも基本的な使い方が似ていますので、1つ使うことができれば、他のフレームワークを使う場合の学習コストは低くなるでしょう。今回は、ver. 4を紹介していますが、メディアクエリの関係でIE8がモバイル向けレイアウトになり、UIパーツの一部もサポートされていないため、IE8できちんと動作させるのであればVer. 3を使ってください。

打ち合わせなどでどうやって確認しているのか?については、PCで確認できるのが一番ですが、スクリーンショットを撮ってPDF化する、プリントするなどの方法があります。

また紹介した、TopcoatはAdobeが開発していることもあり、テンプレートのPSDファイルが配布されています。

フレームワークとして完成されたCompassがあるのですが、軽量でよく使うものだけをライブラリとしてまとめられているので、Bourbonをメインで使っています。

エディタはこれがメインです。初期状態では少し機能の多いエディタですが、Package Controlというパッケージの管理を楽にするパッケージを入れることで、飛躍的に便利なエディタに変わります。HTMLやCSSを始めとした入力補完や、CPPの自動コンパイルなどのパッケージを入れて使っています。

ーーーーーーーーーー

気になるものがあれば、ぜひ明日からでも試してみてください!

Web制作を取り巻く変化と地方における業務の実際

山田 恵理子
講師 山田 恵理子
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

「Web制作を取り巻く変化と地方における業務の実際」についてお話させていただきました、株式会社ゴーフィールドの山田です。
お越しいただいた皆さま、ありがとうございました!

技術的な内容こそ少なかったのですが、地方の一制作会社の「リアル」をお届けできればと思い、お話しいたしました。

勉強会でも、サイト上でも、日々新しい情報が流れていて、また、ワークフローや考え方も変わってきています。もちろん、「自分たちもこうしたいな、こうあるべきだ」という理想は持っておく方がいいのですが、 じゃあ現実はどうなの?というところで、制作者やクライアントの両面で様々な課題が出てきます。

あるべき姿の理想を持った上で、現実の状況を見ながら少しずつ理想に近づけていけたら、と考えて日々弊社でも改善を続けています。
何か一つでも、参考になるところがあれば幸いです!

いくつかご質問をいただきましたので、回答いたします。

■月一回のクライアント訪問の体制について

ゴーフィールドは営業と制作が明確に分かれており、基本的には営業がクライアントのところに伺います。元制作をしていた営業、という者はいますが、往訪する件数が多いので制作はせずに営業のみ行っています。 例外的に、CMSに関する依頼や相談が多いクライアントや制作メンバーが行った方がいいだろうな、というクライアントに対しては制作のメンバーが訪問していますが、件数は少ないですね。職種のシングルタスクを図って、なるべく時間的なロスが出ないようにして います。

■チーム内の情報共有やガイドラインの作り方・共有方法について

以前はメールやファイルサーバに保管など行っていたのですが、現在は主に以下のツールを使って共有しています。

両方とも作業環境や場所を選ばずアクセスでき、またメンバーが変わった場合、途中から参加する場合でも情報が残っているので便利です。

ガイドライン自体を作る場合は、制作チームの週一のミーティングで誰が、いつまでに作るかというのを決めて作成し、次のミーティングで他のメンバーに周知する、というようなことを行っています。作るときも共有するときも、制作業務自体を圧迫せず、だれでも気軽に見れて共有できるということを念頭においています。

■おまけ

---

Webデザインは、いったい、何を解決できるのか?!

中川 直樹
講師 中川 直樹
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

ご来場いただいたみなさま、ありがとうございました。
当初、台風の影響から、開催がどうなるのかと、ドキドキしておりましたが、無事に開催でき良かったです。

Webに従事する人たち誰もがクリエーターであり、僕たちの仕事は、ヒトの行動、社会を変えることに通じています。
「デザイナー」より「デザイニスト」、デザイン思考を大切に、我々の未来を切りひらいていきましょう!

フラットデザインについて「iOS 7」を題材に良い記事がありましたので、掲載します。

そして、時間の都合上、お見せできなかったキネクト利用の実例の記事(ムービー付)です。

話の中にも盛り込ませていただきましたが、岡山には、素晴らしいユーザー体験ができる場所があります。

コト売り、体験という意味で、鶏ガラ豚骨ベースのスープ、佇まい以上に、店主の湯きり、器へのスープベース、盛りと、愛されるべくしてラーメン屋になったであろう、何言ってるか分からない早口の口上。このお店にいって、笑顔にならず帰るヒトは、恐らく一人もいないと思います。

「キムチいれるらーめん※☆○$~」
「唐辛子とニンニクよろく○♪&〜」
「キムチいれってて〜○&おいしいよ〜」
「ありがと※☆した〜$!♪&」

店主は、唯一無二のユーザー・インターフェースであり、
そこで食べるラーメン体験はラーメン&キムチ、店主、客、三位一体、
日本最高峰のユーザー・エクスペリエンスです。

最高峰のユーザー体験は岡山にあり。
名付けて「ぼっけゑ・エクスペリエンス」(BX)

岡山を中心とした人々のWeb利用の特性をさぐり、ユーザー視点でのWeb利用特性を総称して「ぼっけゑ・エクスペリエンス」という言葉が一人歩きしたらいいな。と、真剣に思っております。

また、お会い出来る日を楽しみにしております!!

制作を『超ラク』にするプロダクトのご紹介

阿部 正幸
講師 阿部 正幸
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

講師よりメッセージ

CSS Nite@OKAYAMAに参加されました皆様ありがとうございました。

協賛企業として参加させていただきましたKDDIウェブコミュニケーションズの阿部と申します。ぼっけゑラーメンが既に恋しく、早く岡山に行きたいなと思っています(笑)

さて、当日はつたないプレゼンにも関わらずご清聴いただきありがとうございました。当日のプレゼンでは時間の都合で自社の説明をあまりできませんでしたので、こちらで少し説明させてください。

ツールを使ってWeb制作を行うのが当たり前の時代になってきました。
一つでも多くのツールを知っている方が提案の幅、さらには作業工数を短縮することもできます。

今回、私はバックアップにフォーカスし話をさせていただきました。
その中ではDropboxを使ったり、弊社のサーバーツールを使ったりし処理を行うことで作業効率が良くなり、データ耐性も上がるというお話をしました。
昨今、WordPressのサイト改ざんについて何かと話題になっていますが、Dropboxまたは、弊社のサーバーツールを使うことでスグに前日の状態に戻すことが可能です。
是非一度自動バックアップ機能を体験いただければと思います。

プレゼンの中で少し紹介させていただいた共用サーバーACE01は、ディスク・データベース・マルチドメインなどのサーバーリソースを無制限に使用できます。
さらに標準で搭載されている「SmartRelease」機能は、自動バックアップやテストサイト標準装備などで『超ラク』をコンセプトに開発されたもので、Web制作者を強力にバックアップいたします。10日間無料お試しもありますので、ぜひ一度お試しください。

特別協力

CSS Nite

岡山情報ビジネス学院

チロロネット

岡山WEBクリエイターズ

イベント一覧

vol.1 明日から使える! Webディレクション術

vol.2 今日から使えるHTML5&CSS3

vol.3 Webクリエイターのための、制作効率アップ術

vol.4 デザイナーじゃなくても知っておきたい、成果の上がるWebデザイン

vol.5 マルチデバイス対応の最新事情

vol.6 ワンランク上のWeb制作

vol.7 UI/UXから考えるWeb制作

vol.8 ウェブ制作の改善手法