Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
森和恵
https://www.youtube.com/r360studio
本日の内容は…
本日のテーマは、
ウェブの今から、未来を見通します。
本日の内容
1. レイアウトとデザイン
2. コンテンツ表現
3. 制作フロー
4. まとめ
本日の内容
1. イマドキのレイアウトとデザイン
2. イマドキのコンテンツ表現
3. イマドキの制作フロー
4. まとめ
1. イマドキのレイアウトとデザイン
ミニマルデザイン
• 最小限の構成要素を残す
• コンテンツは大きく、空白は広く
• データが軽く、読み込みが早い
• 記事が楽に読める、集中できる
• デザインの好みに左右されない
• フラットデザイン
• ビビッドなテーマカラー
ミニマルデ...
フラットデザイン
• 立体感をなくし、平面的に
• テクスチャーやグラデーションで
質感をださない
• ドロップシャドウで影をつけない
• シンプルで、目線の邪魔をしない
• 操作がわかりにくい
• 失敗すると手抜きっぽい
Click
ミニマム&フラットデザインでは
「どのサイトもおんなじ」に見えてしまう
必要なものだけのシンプルさはそのままで
「おぼえてもらうためにアピール」するには……
セミフラットデザイン
• フラットに立体感と奥行きをプラス
• ……でも、質感はひかえめに
• 昔流行った、“ロングシャドウ”
なんて表現もありましたね
• Googleマテリアルデザイン
• インタラクションで不安なく操作
ロングシャドウアイコン
Google と Instagram のロゴ
https://googleblog.blogspot.jp/2015/09/google-update.html
https://en.instagram-brand.com/assets
Googleマテリアルデザイン
https://youtu.be/Q8TXgCzxEnw
インタラクション
• インターフェースに“振る舞い”を
• アニメーションで、操作感を演出
• ユーザーに状況や結果を伝える
• ユーザーに快感や愛着を
• 次への行動を促す
• マイクロインタラクション
https://dribbble.co...
シングルカラムレイアウト
• 1カラムでレイアウト
• レスポンシブ対応しやすい
• ひたすらスクロールして読む
• ひとつの枠に集中して読める
• 縦が時間軸。横が広がり
• 横に空間が広く使えて
大きなビジュアルが配置できる
• いろんなタ...
メニュー/ヒーローイメージ/カード
• メニューは、ハンバーガーボタンが
浸透してきている
• ヒーローイメージには
イメージ写真・ムービー・イラスト
キャッチコピーなどサイトの特徴を
• カードには、情報のグルーピングを
• カードは、並列に...
【カード型UIにおける5つの効果的なテクニック | UX MILK】
< http://uxmilk.jp/60591 >
【Cards · Bootstrap】
< https://getbootstrap.com/docs/4.0/comp...
【小松製作所 - 建設機械のコマツ】< https://home.komatsu/jp/ >
【建設機械のコマツ,小松製作所】※アーカイブ
< http://web.archive.org/web/20170215144934/http://k...
【1カラムレイアウト Webデザイン集 |ARTNOC.COM Webデザインギャラリーサイト】
< http://art-noc.com/category/layout/1columns >
【JWDG(Japan Web Design Ga...
2. イマドキのコンテンツ表現
たんなる《情報》ではなく
「共感・納得・驚き・感心・興味」の
どれかを読者に与えるコンテンツを書くには、
情報に「個性やストーリー」を少し加える。
「誰」が提供しているかを覚えてもらうために
訪問者をリピーターに。長期的な関係を作る
記事の組み立て①(準備)
• テーマに沿ったネタを集める
• 記事の目的・ターゲットを決める
「誰に」(レベル)
「何を伝えたいか」(ゴール)
• 伝えることを3行で要約してみる
• タイトルとサブタイトル
(補足や別の視点)
• 目次
記事の組み立て②(組み立て)
• フォーマットを決めると楽
• リードで最初のつかみ
(アイスブレイク・問題定義・ゴール提示)
「へぇ。そうなんだ(もっと読みたい)」
• 目次を見出しにして、本文を書く
• まとめで最後に念押し
(個人的な見解...
記事の組み立て③(練り上げる)
• 時間をおいてから、推敲する
• 最初はたくさん書いて、後からダイエット
• 口に出してスムーズに読めるか?
• 語尾が同じにならないように
(動詞使いこなす)
• 漢字とひらがなのバランス
• 点や丸の位置
アウトプットの練習から、本番まで
Twitterでつぶやく
140文字なので手軽
新鮮で生の声
関連のある情報
ファンを集める
軽い
メルマガに寄稿
外部に短く書く
note や はてなブログ
連載
ふつう
サイトの恒久的な記事
電子書籍
本の...
【森和恵�(@r360studio)さん | Twitter】
< https://twitter.com/r360studio >
【» Web業界で、気になるアレコレ /Vol.80
「 2018年の“色・写真”のトレンドはコレ!! 」|ス...
3. イマドキのウェブ制作フロー
デザインカンプが確定したら、コーディングだと
後工程の担当にロスタイムがでるし
あとから修正がはいると面倒
《プロトタイプ》をたたき台として作り
クライアントを含めて全員で意見調整する
イマドキのサイト制作フロー
要件の洗い出し
課題を見つける
解決方法の模索
企画
ディレクター
クライアントで
ワイヤーフレーム作成
デザインカンプ
プロトタイプ
課題解決の模索
デザイン検討
プロトタイプ作成
完成イメージで
意図を伝える
全...
・Bootstrapありきで制作する量産型ワークフロー
作業者みんながBootstrapを知り、土台にする
・XDプロトタイプから、Dwでコーディング
・イメージは、PSやAIで作り
CCライブラリ経由でXDへ
これからのウェブ制作フロー
私が思う
• Bootstrapとは、CSSフレームワーク
「HTML+CSS + Javascript」で構成。HTMLページの土台
• 公式サイトは、 https://getbootstrap.com/
• 最新バージョンは、 v4.x
• MIT ...
レスポンシブ対応。Ver3では、ブレイクポイント3つ。
ブレイクポイント毎にカラムを切り替える
レイアウトを
しなければ
1カラムのまま
レイアウトを
作ればそのサイズ
以上は継続
レイアウトを
作ればそのサイズ
以上は継続
6 6
4 4 4
AdobeXDとは、プロトタイプを作るソフト
画面デザインを作り、画面を繋げてプロトタイプを作り、
チーム全員で、プロトタイプを共有する
https://helpx.adobe.com/jp/xd/help/adobe-xd-overview.html
XDで作ったプロトタイプを元に、コーディングする
まとめ
これからウェブ制作では、
・シングルカラムのフラット過ぎない
ミニマムデザイン
・リピーターやファンを増やす
愛され個性派コンテンツ作り
・制作の無駄が少ない、
プロトタイプを使った制作フローを
Thank you!!
2003年のFlash入門を担当してから、14年。
みなさんと共にウェブ制作を学びました。
ありがとうございました!
今後の予定は、Twitterで。@r360studio
これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》
Prochain SlideShare
Chargement dans…5
×

これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》

831 vues

Publié le

iMedio担当のウェブ制作セミナーの最終回(https://www.sansokan.jp/events/eve_detail.san?H_A_NO=25253)では、「これからのウェブ制作はこう変わっていく」をテーマに語りました。

Publié dans : Formation
  • Soyez le premier à commenter

これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》

  1. 1. 森和恵
  2. 2. https://www.youtube.com/r360studio
  3. 3. 本日の内容は…
  4. 4. 本日のテーマは、 ウェブの今から、未来を見通します。
  5. 5. 本日の内容 1. レイアウトとデザイン 2. コンテンツ表現 3. 制作フロー 4. まとめ
  6. 6. 本日の内容 1. イマドキのレイアウトとデザイン 2. イマドキのコンテンツ表現 3. イマドキの制作フロー 4. まとめ
  7. 7. 1. イマドキのレイアウトとデザイン
  8. 8. ミニマルデザイン • 最小限の構成要素を残す • コンテンツは大きく、空白は広く • データが軽く、読み込みが早い • 記事が楽に読める、集中できる • デザインの好みに左右されない • フラットデザイン • ビビッドなテーマカラー ミニマルデザイン
  9. 9. フラットデザイン • 立体感をなくし、平面的に • テクスチャーやグラデーションで 質感をださない • ドロップシャドウで影をつけない • シンプルで、目線の邪魔をしない • 操作がわかりにくい • 失敗すると手抜きっぽい Click
  10. 10. ミニマム&フラットデザインでは 「どのサイトもおんなじ」に見えてしまう
  11. 11. 必要なものだけのシンプルさはそのままで 「おぼえてもらうためにアピール」するには……
  12. 12. セミフラットデザイン • フラットに立体感と奥行きをプラス • ……でも、質感はひかえめに • 昔流行った、“ロングシャドウ” なんて表現もありましたね • Googleマテリアルデザイン • インタラクションで不安なく操作
  13. 13. ロングシャドウアイコン
  14. 14. Google と Instagram のロゴ https://googleblog.blogspot.jp/2015/09/google-update.html https://en.instagram-brand.com/assets
  15. 15. Googleマテリアルデザイン https://youtu.be/Q8TXgCzxEnw
  16. 16. インタラクション • インターフェースに“振る舞い”を • アニメーションで、操作感を演出 • ユーザーに状況や結果を伝える • ユーザーに快感や愛着を • 次への行動を促す • マイクロインタラクション https://dribbble.com/search?q=interaction
  17. 17. シングルカラムレイアウト • 1カラムでレイアウト • レスポンシブ対応しやすい • ひたすらスクロールして読む • ひとつの枠に集中して読める • 縦が時間軸。横が広がり • 横に空間が広く使えて 大きなビジュアルが配置できる • いろんなタイプのグリッドで変化 ヒーローイメージ カルーセル メニュー カード
  18. 18. メニュー/ヒーローイメージ/カード • メニューは、ハンバーガーボタンが 浸透してきている • ヒーローイメージには イメージ写真・ムービー・イラスト キャッチコピーなどサイトの特徴を • カードには、情報のグルーピングを • カードは、並列に情報が並ぶ 数が多くなると情報が埋もれる ヒーローイメージ メニュー カード
  19. 19. 【カード型UIにおける5つの効果的なテクニック | UX MILK】 < http://uxmilk.jp/60591 > 【Cards · Bootstrap】 < https://getbootstrap.com/docs/4.0/components/card/ > 【Components · Bootstrap】 < https://getbootstrap.com/docs/3.3/components/#thumbnails > 【レスポンシブデザインに相性がいい、カード型コンポーネントの実装アイデアのまとめ | コリス】 < https://coliss.com/articles/build-websites/operation/design/card-ui-components.html >
  20. 20. 【小松製作所 - 建設機械のコマツ】< https://home.komatsu/jp/ > 【建設機械のコマツ,小松製作所】※アーカイブ < http://web.archive.org/web/20170215144934/http://komatsu.co.jp > 【株式会社クボタ】< http://www.kubota.co.jp/index.html > 【かわいい雑貨をプチプライスで毎月お届け|ガラフル|フェリシモ】 < https://www.felissimo.co.jp/galafull/ > 【東京大学 中原淳研究室 - 大人の学びを科学する】< http://www.nakahara-lab.net/ > 【PENCIL by Schoo】< https://pencil.schoo.jp/ >
  21. 21. 【1カラムレイアウト Webデザイン集 |ARTNOC.COM Webデザインギャラリーサイト】 < http://art-noc.com/category/layout/1columns > 【JWDG(Japan Web Design Gallery) 日本のWebデザインギャラリー : シングルカラム】 < http://japan.2-wg.com/category/special/1-column/ > 【81-web.com【Webデザイン リンク集】】 < http://81-web.com/ >
  22. 22. 2. イマドキのコンテンツ表現
  23. 23. たんなる《情報》ではなく 「共感・納得・驚き・感心・興味」の どれかを読者に与えるコンテンツを書くには、
  24. 24. 情報に「個性やストーリー」を少し加える。 「誰」が提供しているかを覚えてもらうために 訪問者をリピーターに。長期的な関係を作る
  25. 25. 記事の組み立て①(準備) • テーマに沿ったネタを集める • 記事の目的・ターゲットを決める 「誰に」(レベル) 「何を伝えたいか」(ゴール) • 伝えることを3行で要約してみる • タイトルとサブタイトル (補足や別の視点) • 目次
  26. 26. 記事の組み立て②(組み立て) • フォーマットを決めると楽 • リードで最初のつかみ (アイスブレイク・問題定義・ゴール提示) 「へぇ。そうなんだ(もっと読みたい)」 • 目次を見出しにして、本文を書く • まとめで最後に念押し (個人的な見解や感想、展望なども)
  27. 27. 記事の組み立て③(練り上げる) • 時間をおいてから、推敲する • 最初はたくさん書いて、後からダイエット • 口に出してスムーズに読めるか? • 語尾が同じにならないように (動詞使いこなす) • 漢字とひらがなのバランス • 点や丸の位置
  28. 28. アウトプットの練習から、本番まで Twitterでつぶやく 140文字なので手軽 新鮮で生の声 関連のある情報 ファンを集める 軽い メルマガに寄稿 外部に短く書く note や はてなブログ 連載 ふつう サイトの恒久的な記事 電子書籍 本の出版 財産になる 重い
  29. 29. 【森和恵�(@r360studio)さん | Twitter】 < https://twitter.com/r360studio > 【» Web業界で、気になるアレコレ /Vol.80 「 2018年の“色・写真”のトレンドはコレ!! 」|スタッフコラム|ソフト産業プラザ イメディオ iMedio】 < https://www.imedio.or.jp/column/column_mori/2018011616000 > 【LIFE is 日々一歩(44)[Web]Dreamweaver 再び。〜CSS Nite LP51「Reboot Dreamweaver」〜 /森 和恵 - 日刊デジクリ】 < http://bn.dgcr.com/archives/20170123140100.html > 【Dreamweaver アーカイブ - ブログ|r360studio】 < http://r360studio.com/blog/category/adobe/dreamweaver >
  30. 30. 3. イマドキのウェブ制作フロー
  31. 31. デザインカンプが確定したら、コーディングだと 後工程の担当にロスタイムがでるし あとから修正がはいると面倒
  32. 32. 《プロトタイプ》をたたき台として作り クライアントを含めて全員で意見調整する
  33. 33. イマドキのサイト制作フロー 要件の洗い出し 課題を見つける 解決方法の模索 企画 ディレクター クライアントで ワイヤーフレーム作成 デザインカンプ プロトタイプ 課題解決の模索 デザイン検討 プロトタイプ作成 完成イメージで 意図を伝える 全員で進める グラフィック作成 コーディング テスト 本制作 公開 プロトタイプを 再利用して 本データを作る
  34. 34. ・Bootstrapありきで制作する量産型ワークフロー 作業者みんながBootstrapを知り、土台にする ・XDプロトタイプから、Dwでコーディング ・イメージは、PSやAIで作り CCライブラリ経由でXDへ
  35. 35. これからのウェブ制作フロー 私が思う
  36. 36. • Bootstrapとは、CSSフレームワーク 「HTML+CSS + Javascript」で構成。HTMLページの土台 • 公式サイトは、 https://getbootstrap.com/ • 最新バージョンは、 v4.x • MIT Licence で、商用利用もOK Bootstrapとは?
  37. 37. レスポンシブ対応。Ver3では、ブレイクポイント3つ。
  38. 38. ブレイクポイント毎にカラムを切り替える レイアウトを しなければ 1カラムのまま レイアウトを 作ればそのサイズ 以上は継続 レイアウトを 作ればそのサイズ 以上は継続 6 6 4 4 4
  39. 39. AdobeXDとは、プロトタイプを作るソフト
  40. 40. 画面デザインを作り、画面を繋げてプロトタイプを作り、 チーム全員で、プロトタイプを共有する https://helpx.adobe.com/jp/xd/help/adobe-xd-overview.html
  41. 41. XDで作ったプロトタイプを元に、コーディングする
  42. 42. まとめ これからウェブ制作では、 ・シングルカラムのフラット過ぎない ミニマムデザイン ・リピーターやファンを増やす 愛され個性派コンテンツ作り ・制作の無駄が少ない、 プロトタイプを使った制作フローを
  43. 43. Thank you!! 2003年のFlash入門を担当してから、14年。 みなさんと共にウェブ制作を学びました。 ありがとうございました! 今後の予定は、Twitterで。@r360studio

×