「Webサイトができるまで」参加メモ 関西フロントエンドUG 2016/11/05

「ブランドイメージの再構築からはじめるウェブデザイン - NPO法人のサイト制作事例から」

深沢 幸治郎 さん（水交デザインオフィス）

POINT

• ブランドパーソナリティの策定で、深いレベルでの意識共有
• ロゴ制作は近道が無く地道にすりあわせていく
• Pinterest のシークレットボードでイメージの共有が簡単に
• コミュニケーションをしっかりとることで、緊急時も対処しやすく

ブランドパーソナリティ

• ブランドを人間に見立ててキャラ付けをする
• デザインの方針が固まるとデザイン修正を減らせる

ロゴ制作

• ロゴ制作は近道が無く地道にすりあわせていく
• クライアントのイメージを膨らませ提案を繰り返す
• 最終的に2,3案に絞り、カラーやロゴの使い方などをつめていく
• デザインのよりどころになるのでサイトデザインの前に出来ると楽

Pinterest

• 双方からアップすることができる
• サジェスト機能でアイデアが膨らむ
• ロゴ案からなにから全部ごちゃっとあげる
• シークレットボードという非公開の環境を作れる

コミュニケーション

• チャットワークとスカイプを使用
• スカイプでの定例ミーティングを15〜30分/週1回
• 頻繁なコミュニケーションで信頼関係を築く
• 信頼関係ができた納期直前のトラブルも柔軟な交渉ができた。
• 進行管理費として大きなウェイトを占めるほどコミュニケーションは重要。

「デザイナーがポエムを書いてみた話」

spicagraph さん

POINT

• イメージに近い写真やイラストと文章で構成する
• 開発フローの最後まで共有できるとよりよくなる
• 自分が照れては伝わらない
• デザイナは魔法使いでありたい

イメージに近い写真やイラストと文章で構成する

• サイトとしてユーザーにどんな印象を与えるのか
• デザインや振る舞いの行動指針のようなもの
• 方向性・ユーザー・機能・雰囲気などイメージを膨らませる
• こうする、だけでなく、しないことも明記する

開発フローの最後まで共有できるとよりよくなる

• 場合によっては立場を超えて動く必要がある

自分が照れては伝わらない

• ユーザーに共感して貰うための内容、照れていては共感できない。

デザイナは魔法使いでありたい

• サイトやコンテンツに人格や体験を与える魔法使い
• サイトやチームによって最適な共有方法を考える必要がある

「sketch3を使ったコンポーネント設計とデザイン」

hnikaido さん, tamsatake さん

POINT

• 変更に強い、作業が早い
• とにかく軽い
• アートボードの外側が自由に使える
• 便利なスタイル、シンボル機能
• 更に便利に

変更に強い、作業が早い

• マルチデバイス・レスポンシブ時代のデザインに対応
• コンポーネント設計に向きパーツの使い回しに優れる
• 複数アートボードが簡単に量産できる
• プロトタイプへの連携も簡単

とにかく軽い

• 大量のアートボードを作っても軽快に動作
• 仮説と検証を高速でまわせる
• 複数案作ったり、変更を試したりといった事が簡単
• アートボードで古いバージョンを残して経緯の説明をしたり過去に立ち戻る事も

アートボードの外側が自由に使える

• 参考資料を置いたり、メモに使ったり
• カラーパレットのバリエーションを増やしたりといった使い方も

便利なスタイル、シンボル機能

• フォントや色のスタイルを簡単に変更したり
  ｰ シンボル（コンポーネント）を活用することでデザインをWFに一斉反映する事もできる

更に便利に

• プラグイン
  • marketch
  • Craft
  • Prott
  • Dynamics
  • etc....
• UI Kit
  • Resources
  • facebook
  • invision
  • Bootstrap

「 Web サイトのライティング - Start with words -」

Kazuki Yamashita さん

POINT

• 「知りたい」と「知って欲しい」の齟齬
• ライティングのコツを押さえる
• ウェブデザインの本質

「知りたい」と「知って欲しい」の齟齬

• ライティングのプロではない制作陣やクライアントが作ることもしばしば
• 特にクライアントは強い想いから偏った文章になりがち
• 制作側がwebのプロとして導く必要がある

伝わるライティングのコツを押さえる

• プロのライターとの違いを知る
  • プロは大量の語彙とライティングから推敲する
  • 我々は書けないし言葉は出ないので、膨らませる必要がある
  • とにかく一文でもいいから書く、単語だけでも出す
• 断定表現を使う
  • ○○の○○は○○です
  • 場所時間→特徴→主張の順番で書くときれい
• 形式名詞を使う
  • 断定＋形式名詞
  • 〜のはず、〜ところ、〜こと
  • 例：「するだろう」→「するはずです」
• 否定形文を使う
  • 前後のセンテンスを強調
  • 〜ではありません
  • 例：野菜を食すことだけが、健康的な食事「ではありません」

ウェブデザインの本質

• ウェブは最低限テキストがあれば作れる
• ユーザーは簡潔な情報を求めている
• 検索エンジンの事を気にしがちだが、その先に居るユーザーの事が見えているか

「Webの技術を俯瞰してみた話（フロントに限る）」

Masahiko Sakakibara さん

POINT

• テキストサイトからマテリアルデザインへ
• フレームワークの変移
• HTML/CSSの書き方
• ブラウザの立場の変化
• JSの扱いの変化
• 閲覧環境

テキストサイトからマテリアルデザインへ

1. テキスト系サイトの流行
2. スキュアモーフィック（リアルな表現）
3. フラットデザイン（WEB独特の表現へ）
4. マテリアルデザイン（ボタンやレイヤーの立体感）

フレームワークの変移

1. デザインフレームワーク（bootstrap,foundation）
2. ポストCSSフレームワーク（css animationの動きも含める）
3. 次に何が来るか（コンポーネントフレームワーク？DOM操作で表現力を上げる:OnsenUI2）

HTML/CSSの書き方

• いまやHTMLをコンパイルで生成する時代に（pug,EJSなど）
• CSSコンパイラはSCSSがスタンダードに落ち着いた（SASS,Stylus,PostCSSなど）
• CSS設計も高度に求められる（BEM,OOCSS,SMACSS,FLOCSSなど）

ブラウザの立場の変化

1. 昔は圧倒的シェアのIEが標準だった
2. 乱立しシェアが分散すると、全部おなじ見た目が求められるように
3. 標準化が進みIEが取り残された
4. ポスト「IE」の立場のブラウザも……

JSの扱いの変化

1. 最初の頃は動く意味の無いものを動かす程度の使われ方だった
2. jQueryで実用的な使われ方が増えた
3. データバインディング（AngularJSなど）
4. node.js（JSをサーバーで使う）
5. サーバーサイドレンダリング
6. CSSモジュール（CSSもJSで管理する）
7. Single Page Application ←→ AMP(Accelerated Mobile Pages)
8. アプリ化（Cordova,NativeScript）

閲覧環境

• モバイルでの利用が増えてきた
• どこでもオンラインなわけではない

---

LT

Zeplin & Frontify

@se_kamo さん

sketchが使いやすくなる2つのサービス紹介

Zeplin

レイアウト仕様書が不要になる
Sketchから出力してコメントやスタイルを出す

Frontify

スタイルガイドを作成できる

昔話

shishow さん

• 97年〜ヤフーディレクトリへに載せる時代を経験
• HTMLを書いてきた経験が生きている
• 次に何を見つけるかが大事

画面一覧について考える

mikakane さん

コンテンツを足し算で作って過不足ないのか、
考えるための指標が必要。

• AIDMAのWEB版AISAS（サイト内外を含めた行動フロー）
• IUCOF

AISAS

サイトの内外まで含めた行動を考える事が出来る

IUCOF

よりWeb内に特化した指標がある

• Interest 興味
• Understand 理解促進
• Conviction 確信
• Offer 行動促進
• Form 行動

これを元にサイト設計をしていくと、

• 効果的な動線設計が組める気がする
• ページ毎の役割がハッキリする
• ページ動線の足りない部分について合意が取りやすい

この内容で記事を書いておられました ↓
http://qiita.com/mikakane/items/814f05ff460285b99049