Aggregator

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、深津 貴之（ギルド）の『問題解決のためのプロトタイピング』セッションのスライドなどをシェアします。

• スライド（PDF、119ページ、3.2MB）
• 音声

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、土屋 尚史さん（グッドパッチ）の『ディレクター･デザイナーのためのプロトタイプ制作とシナリオ作り』セッションのスライドなどをシェアします。

• スライド（PDF、65ページ、5.6MB）
• 音声

メッセージ

はじめてのCSS Niteでの講演でとても緊張しましたが、なんとか終われてホッとしています。。

著名な登壇者の方々のお話を聞けて僕自身も非常勉強になりました。 今回のアンケートを見てエンジニアとのコミュニケーションの部分に共感されている方が多かったと思います。 やはり、デザイナーサイドもエンジニアサイドもお互いの領域をもっと理解していくとより良いサービスが作れるようになると思います。

グッドパッチの作っているProttはそんなデザイナーとエンジニアのコミュニケーションの溝を 埋めれるサービスになるように育てていきたいと思っていますのでぜひ長い目で応援頂けると有難いです！

講演で紹介したURLです

Invision
http://www.invisionapp.com/
Prott
https://prottapp.com/
Framer.js
http://www.framerjs.com/
Hype
http://tumult.com/hype/
Origami
http://facebook.github.io/origami/
Capptivate.co
http://capptivate.co/
User Onboarding
http://www.useronboard.com/
UXArchive
http://uxarchive.com/tasks/onboarding
Square Cash
https://square.com/cash

Flinto、POPは省略

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、新免 孝紀さん（ChatWork）の『実例に学ぶ、“失敗しない”UIデザインのコツ』セッションのスライドなどをシェアします。

• スライド（PDF、75ページ、14MB）
• 音声

メッセージ

先日は長時間のセミナーおつかれまでした。
UIデザインで失敗しないためには、どういったところに気をつければいいのか具体的にイメージできるか と思い、実際のプロジェクトでの失敗事例を元にお話させていただきました。提供するサービスのコア・コンセプトは何かということをメンバー間で共有し、そ こからUIデザインを考えることで大きな失敗を防ぐことができると思います。今回事例をお話したことで、UIデザインを行う際の参考になれば幸いです。

今後もより良いサービスを提供できように、みなさんと一緒にUI/UXについて取り組んでいければと思います。
ありがとうございました。

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、坂本 貴史さん（ネットイヤー）の『ブリッジビルダー（Bridge Builder）』セッションのスライドなどをシェアします。

• スライド（SlideShare）
• 音声

メッセージ

UIとUXがテーマということで、マーケティングエージェンシーの立場と、IA（情報アーキテクチャ）からの視点で構成してみました。一番はじめに話すと いうこともあり「Bridge Builder」としてUIとUXをつなぐことや、結局「あなたは何をつくるのですか?」というメッセージが一番伝えたかったことです。今後の業務の中 で、異なる視点やつなぐ役割、結局自分は何をするのかについて思い返していただければ幸いです。

CSS Niteは、2009年に開催されたCSS Nite LP7「IAスペシャル」に登壇して以来でしたが、楽しむことができました。ありがとうございました。

講演ログのツイートや参照サイト、ワイヤーフレームTシャツや書籍についてはStorifyで整理していますので、こちらをご覧ください。

• CSS Nite LP33 UI/UX session #1 Bridge Builder
  

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、秋葉ちひろさん（ツクロア）の『人間だからこそできる、気配りデザイン?ユーザーの負担を最小限にするインターフェイスとは?』セッションのスライドなどをシェアします。

• スライド（PDF、100ページ、13.7MB）
• 音声

メッセージ

アプリの設計について、UI/UXデザイナーだけが考えるだけでよい、という時代はもう過ぎたと考えています。
制作に関わるすべてのデザイナーやエンジニアが小さな気配りを意識し、少しずつでも改善の声を発することで、サービスとして素晴らしい体験を提供できる可能性があります。
身の回りのいろいろなことをしっかりと観察し、理由を考え、そして自分のプロジェクトに最適な体験を提供できるきっかけになればと思います！
ありがとうございました！

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、上野 学さん（ソシオメディア）の『アプリケーションのイディオムデザイン』セッションのスライドなどをシェアします。

• スライド（PDF、72ページ、11.5MB）
• 音声

メッセージ

UXデザインの基本は、分析とデザインを反復的に行うことです。デザインには決まった答がなく、常に試行錯誤が必要だということです。

反復的デザインは、各フェーズ単位、プロジェクト単位、そしてより大きな事業やブランドといった単位でフラクタルに試みることが求められています。例えば、ウォーターフォールのプロセスにおいては、あらかじめ数回のプロトタイプ評価をスケジュールに組み込むとよいでしょう。アジャイルのプロセスにおいては、分析とデザインの反復はサービスのライフサイクルを通じて半永久的に継続することになるでしょう。

UXを向上させる活動とは、そういった考え方を組織や社会に広めることです。そのために皆さんは、個々の手法を実践しながら、この考え方をチームやクライアントに伝達していくことが大切だと思います。

2014年3月29日、ベルサール九段　イベントホールで開催したCSS Nite LP33「UI/UX」のフォローアップとして、池田 拓司さん（クックパッド）の『UIデザインのパターン化と効果的な実践方法』セッションのスライドなどをシェアします。

• スライド（PDF、95ページ、22MB）
• 音声

メッセージ##フォローアップ

今回話させて頂いた、UIデザインのパターン化はUIデザインをする上での１つの切り口であり、ユーザーに自然に分かりやすく伝わりやすいデザインをするためのベーススキルです。さらに、感動して、愛着もって使ってもらうサービスを作るには、サービスの特徴やサービス提供者の得意な部分を活かして磨きをかけなければいけないと思います。

これからも今よりもっと楽しい生活をおくれるよう、一緒に良きサービス作り・良きデザインに取り組んでいきましょう！
ありがとうございました。

・パターンを紹介するサイト
http://www.mobilemozaic.com/
http://androidniceties.tumblr.com/
・Androidオフィシャルのアイコンデータダウンロードページ
https://developer.android.com/design/downloads/index.html
・アイコンの起源を紹介するサイト
https://readymag.com/shuffle/ui-symbols/
・クックパッドのCSS Frameworkの発表
http://cssnite.jp/archives/post_2503.html
・iOS7の標準UIコンポーネントデータ
http://www.behance.net/gallery/Download-iOS7-UI-Kit-PSD/9301119
・プロトタイプ作成サービス Flinto
https://www.flinto.com/

Web担当者Forumの連載コーナー、「海外&国内SEO情報ウォッチ」を更新。今週は、『ネガティブSEOからサイトを守れ! 被害状況の監視法』、『新規公開ページの“SEO成功度”を調べる方法』、『グーグルがドメイン登録サービスを開始』など10記事+2記事。

- ネガティブSEOからサイトを守れ! 被害状況の監視法【海外＆国内SEO情報ウォッチ】 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM by Kenichi Suzuki

2014年9月20日（土）、ベルサール神田 イベントホールでCSS Nite LP36 powered by In-house SEO Meetup「ビジネスに活用できる2014年SEOトレンド」を開催します。

Web担当者Forum、In-house SEO Meetupとのコラボイベントで、今回が3回目です。

今回は、「ビジネスに活用できる2014年SEOトレンド」をテーマに開催予定です。

「SEO＝キーワード＋タグ＋テキスト＋リンク」で集客のためという段階を越えて、事業成果に結びつけるために行うべきことを、最近のトレンドと合わせて把握できるようになる。現時点では「SEO担当」の人が「オンライン事業の中核」にステップアップするために把握しておくべき全体像をつかめるようになる。

次の6セッションを予定します。

• 滝日 伴則（アイオイクス）／基調講演（2014年のSEOトレンド）
• 松尾 茂起（ウェブライダー）／コンテンツSEO
• 床尾 一法／コンテンツマーケティングの評価
• 滝井 秀典（キーワードマーケティング）／コンバージョン
• 鈴木 謙一（海外SEO情報ブログ）／構造化データの活用、事例
• 山田 明裕（セルフデザイン・ホールディングス）／上位表示のためのコンテン

今回のLP36に限り、次の理由から参加費などを変更しています。

• 例年より長めです。2日間の開催を検討しましたが、1日に押し込むことにしました。
• これまで、机ごとに3人がけでしたが、長時間のため、2人がけにします。
• 長時間のセミナーのため、お弁当とコーヒーをご用意します。

2014年6月20日、デジタルハリウッド福岡校 セミナールームでCSS Nite in FUKUOKA, Vol.5を開催し、50名強の方にご参加いただきました。

当日は福岡放送の取材も入りました。

ツイートは下記にまとめました。

• CSS Nite in FUKUOKA, Vol.5 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS nite Fukuoka vol.5行ってきました。Illustratorの使いどころとは？？ | web design cafe
• CSS Nite in FUKUOKA, Vol.5に参加しました！ | えつごと

こちらは、出演者のブログ。

• CSS Nite in FUKUOKA, Vol.5 で登壇しました ? Volverebit｜福岡のイラスト制作

スライド

ハラダさんのセッションのスライドは、SlideShareで公開されています。

カネウチカズコさんのセッションのスライドは、SlideShareで公開されています。

懇親会にて、CSS Nite in FUKUOKAを地元の有志によって、定期開催していこうという話が出ていますので、ぜひ、ご協力いただければ幸いです。

2014年7月17日（木）19:30-21:00、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite x 優クリエイト「After Dark」（12）を開催します。

FONTPLUS｜フォントプラス、モリサワという代表的な日本語Webフォントのベンダーを含め、3組のスピーカーを迎え、Web Fontsにフォーカスします。

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、こもり まさあきさんの『Framerで動くモックアップを簡単作成』セッションのスライドなどをシェアします。

補足、メッセージ

今回Framerを紹介したのは、主にヴィジュアル面を制作されるデザイナーさんでもほんの少しコードを書いてもらうと意図した動きを実装したモックアップを作って、クライアントや次のステップの担当者に自分の意図するものを伝えやすいかな？というところにあります。

他のモックアップツールは、「画面全体を登録して、その中でボタンの位置を指定して次の画面に遷移させる」といった使い方も多く、実際には「画面内の一部だけが変わるんだけど…」とか「パッと変わるんではなく、ほわっと出てくる感じで変わるんだよね」みたいなことは多々あるんじゃないかと思うのです。そういったときに、このFramerであれば、画面内の一部を別に書き出すことで個別の指定が可能になります。

普段コードを書く機会のない方にはちょっと難しいかな？とも思ってはいたのですが、アンケートの結果を見ても「JavaScript難しそう」という声が多かったように思います。でも、安心してください。当日はひょうひょうと書いてたように見えるこもりも、実際にはそんなにJavaScriptには詳しくもないので。

JavaScriptを書くと言っても、ああいった画面遷移などは割と決まった動きになることも多くFramerを使えば高度な記述は求められません。「画像をどこの位置に表示するか」「クリックしたときに動かすのか」「ドラッグが止まったら動かすのか」「他のアニメーションが終わったら次のアニメーションを実行するのか」みたいなことなら、あらかじめ用意された変数やファンクション（機能）を書くだけです。ちょっとJavaScriptをたしなんでる方はお気付きのように、jQueryのプラグインの実行オプションを書くのに非常に似ているかと思います。

最後の質問でもあったように、これを実際のサイトで利用できるかというとそのままでは使うことはできないでしょう（使えなくはないですが）。それをベースに専門のエンジニアに作ってもらう、最終的なコードが流用可能な製品品質のものを作りたければ最初から別のものを使うといったことになります。Framerは現時点ではあくまでもWebサイトやWebアプリ、スマートデバイス向けのアプリのデザインカンプをもとにしてプロトタイピングをするものだと考えていただいた方が良いかと思います。

今回セッション中で紹介したファイル、デモファイルなどは下記にまとめておきました。GitHubにあげてますので、右下にある「Download ZIP」のボタンでダウンロードしてください。中にいろいろファイルが入ってますが、app.jsが実際の指定ファイルでコメントをいれてあります。.sketchは元ファイルになります。レイヤーの作り方などのご参考までに。

https://github.com/gaspanik/cssnite-ad11-follow

CSSNiteAfiterDark-11-komori from CSS Nite on Vimeo.

2014年6月18日 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（11） のフォローアップとして、 イシジマ ミキさん（ザ・マーズナレッジ）の『ワイヤーフレーム・プロトタイプ制作に使うSketch』セッションのスライドなどをシェアします。

• スライド

補足など

皆さん、ご参加ありがとうございました。

わたしも簡単なワイヤーフレームの設計で最適なツールに悩まされてきたことがあり、いろいろ試していました。AIやFW、Cacoo、OmniGraffleなど。

それらの中で一番シンプルに感じたのがSketchです。基本的な操作概略を見ることで、実際の制作のイメージが想像できたのなら幸いです。ぜひゆとりのあるプロジェクトやプライベートワークなどで試してみる機会を作ってみてください。

いただいた質問にお答えさせていただきますね。

Q1.スライスを切るのにはどうしたら？

A1.スライスツールを使うことで任意のサイズにすることが可能です。また、デモで行ったように右側のパネル、一番下に表示される「Make exportable」をクリックしたのち、「Export」ラベルの右側に表示されるスライスアイコンをクリックすることでも作成することが可能です。

Q2. ビットマップを貼っての@2x書き出しはできるのか？

A2. 可能ですが荒れちゃいますので、ビットマップベースのものは倍のサイズで作ってから縮小する方法をとるのが望ましいです。

*Q3. モックアップ以上のデザインは厳しい？ *A3. パスツールの動作がAIと異るものなので、ロゴや書体を作るために複雑なパスを切ろうとすると慣れが必要になってきます。しかしそれは「デザインが厳しい」というコトではありません。

こちらを見ていただくとさまざまなアプリやインターフェイスが作られていることが分かります。

ダウンロードしてSketchで開いてみることでどのような表現をしているのかが学べますのでいろいろ見てみることをおすすめします。

Q4. 角丸長方形のリサイズはアールが崩れませんか？

A4. 角丸長方形、長方形に角丸設定をして変倍してもアールがおかしくなることはありません。またSketchには9スライス機能もありますよ。

CSSNiteAfiterDark-11-ishijima from CSS Nite on Vimeo.

補足など（こもりまさあきさんから）

あとSketchの件で。以下が、こもりがインストールしているプラグインになります。イシジマさんの解説にあったようにダウンロードして、プラグインフォルダにいれてもらえば使えるようになります。Sketch単体はさほど覚えることのないシンプルなアプリケーションなんですよね。なので、その足らない部分を補うのがプラグインだと思っていただければ良いかと。

• こもりが入れてるプラグインリスト - http://www.mkdown.com/ccfa37b1bf412aca28c8

電子書籍「Sketch 3 Book for Beginner（http://theneutrals.io/s3bp/）」でもいくつか紹介していますが、実際にSketchや公開されているプラグインを使いこなしたり、他のアプリケーションと連携させるとこんなこともできるようになるよ、というデモは以下をご覧ください。

• Sketch w/ sketch-measure - http://quick.as/a0vsqoe
• rename & export subfolder - http://quick.as/pr6cvvx
• Sketch artboard to CloudApp - http://quick.as/noju9rn
• demo workflow w/ sketch - http://quick.as/yeacmkj
• Duplicate artboards - http://quick.as/10asgz0
• LINE Stamp Exporter - http://quick.as/yras2dz
• export assets - http://quick.as/gplcoyw

イジジマさんが最後に行ったデモはこんな感じですね。

• Hi-FI WF w/ Sketch 3 on Vimeo - https://vimeo.com/95168228
• Tuts+ Ps tutorial w/ Sketch 3 on Vimeo - https://vimeo.com/95837178

こんにちは、デザイナーのやのっちです。

みなさんは資料を作る機会は多いですか？資料を作っている時に「なんか読みづらいな〜。もう少しなんとかしたいんだけどな〜」なんて思うことありませんか？

今回は、そんな方に是非おすすめしたい書籍「ノンデザイナーズ・デザインブック」をご紹介します。

まずはじめに、この書籍は正式にデザインを勉強したことはないけれど、デザインする必要がある方に向けて書かれています。たとえば、以下のような方です。

• ニュースリリース、プレスリリースを書いている
• 企画書やプレゼンテーション資料を作っている
• 自社で広告を作っている
• Webマスター

内容は、何をどうすれば美しくできるのかがフルカラーで具体的に書いてあり、初心者でもわかりやすくなっています。
よい例だけではなく、避けた方がいいこと、ダメな例も書いてあるので、参考になりますよ。

この書籍では「デザインの4つの基本原則」として、以下をあげています。これをマスターすれば美しい資料が作れます。

1.近接

関連する項目をまとめてグループ化するということです。

グループ化することでひとつの塊として捉えることができ、情報が伝わりやすくなります。

2.整列

すべての項目がページ上のなにかほかのものと視覚的に関連しなければなりません。

グループ化した複数の塊を整列します。整列といっても、右寄せ、左寄せ、中央寄せ、均等揃えとあり、それぞれ印象は異なります。

3.反復

デザイン上のなにかの特徴を作品全体を通して繰り返すということです。

見出しやテキストの大きさを変えて特徴をつけましょう。カラーリングを揃えて統一感を出すのもよいですね。複数ページの資料にもおすすめです。

4.コントラスト

同一ページに２つの異なる要素（２種類の書体や2種類の太さの線など）を配置するときには、それらを似せてはなりません。コントラストを効果的にするには、2つの要素がはっきりと異なっている必要があるのです。

はっきりがポイントです。タイトル部分のテキストを大きくしたり、思い切って背景に色を敷くなど色々試してみてください。

たとえば、以下のような資料があるとします。

こちらの資料に「デザインの4つの基本原則」を実践すると以下のような資料になります。

いかがですか？
実践前の資料より、読みやすい印象になったのではないでしょうか。

美しい資料は情報が整理されているので読みやすさも向上しますし、相手に伝わりやすくなりよい印象を与えることができます。
デザイナーの力を借りなくても、ちょっとのコツを知っているだけで、読みやすさや印象は変えることができると私は思います。

書籍後半には活字のデザインについても書かれていて、個人的にはデザイナーが読んでもとても勉強になる書籍だと思います。
今回ご紹介した内容が日頃の資料作成のお役に立てれば幸いです。

目次

1. ジョシュアツリーの悟り
2. 近接
3. 整列
4. 反復
5. コントラスト
6. 復習
7. カラーを使う
8. おまけのチップス＆トリック
9. 活字（と人生）
10. 活字のカテゴリー
11. 活字のコントラスト
12. さて、わかりましたか？
13. クイズの答え
14. この本で使った書体