これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》
•
2 likes•1,388 views
iMedio担当のウェブ制作セミナーの最終回（https://www.sansokan.jp/events/eve_detail.san?H_A_NO=25253）では、「これからのウェブ制作はこう変わっていく」をテーマに語りました。
Recommended
More Related Content
More from Mori Kazue
More from Mori Kazue (20)
Recently uploaded
Recently uploaded (10)
これまでのウェブとこれからのウェブを語ろう《ウェブ制作のトレンド》
- 1. 森和恵
- 4. 本日の内容は…
- 6. 本日の内容 1. レイアウトとデザイン 2. コンテンツ表現 3. 制作フロー 4. まとめ
- 7. 本日の内容 1. イマドキのレイアウトとデザイン 2. イマドキのコンテンツ表現 3. イマドキの制作フロー 4. まとめ
- 9. ミニマルデザイン • 最小限の構成要素を残す • コンテンツは大きく、空白は広く • データが軽く、読み込みが早い • 記事が楽に読める、集中できる • デザインの好みに左右されない • フラットデザイン • ビビッドなテーマカラー ミニマルデザイン
- 10. フラットデザイン • 立体感をなくし、平面的に • テクスチャーやグラデーションで 質感をださない • ドロップシャドウで影をつけない • シンプルで、目線の邪魔をしない • 操作がわかりにくい • 失敗すると手抜きっぽい Click
- 13. セミフラットデザイン • フラットに立体感と奥行きをプラス • ……でも、質感はひかえめに • 昔流行った、“ロングシャドウ” なんて表現もありましたね • Googleマテリアルデザイン • インタラクションで不安なく操作
- 14. ロングシャドウアイコン
- 15. Google と Instagram のロゴ https://googleblog.blogspot.jp/2015/09/google-update.html https://en.instagram-brand.com/assets
- 17. インタラクション • インターフェースに“振る舞い”を • アニメーションで、操作感を演出 • ユーザーに状況や結果を伝える • ユーザーに快感や愛着を • 次への行動を促す • マイクロインタラクション https://dribbble.com/search?q=interaction
- 18. シングルカラムレイアウト • 1カラムでレイアウト • レスポンシブ対応しやすい • ひたすらスクロールして読む • ひとつの枠に集中して読める • 縦が時間軸。横が広がり • 横に空間が広く使えて 大きなビジュアルが配置できる • いろんなタイプのグリッドで変化 ヒーローイメージ カルーセル メニュー カード
- 19. メニュー／ヒーローイメージ／カード • メニューは、ハンバーガーボタンが 浸透してきている • ヒーローイメージには イメージ写真・ムービー・イラスト キャッチコピーなどサイトの特徴を • カードには、情報のグルーピングを • カードは、並列に情報が並ぶ 数が多くなると情報が埋もれる ヒーローイメージ メニュー カード
- 20. 【カード型UIにおける５つの効果的なテクニック | 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 >
- 21. 【小松製作所 - 建設機械のコマツ】< 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/ >
- 22. 【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/ >
- 23. 2. イマドキのコンテンツ表現
- 26. 記事の組み立て①（準備） • テーマに沿ったネタを集める • 記事の目的・ターゲットを決める 「誰に」（レベル） 「何を伝えたいか」（ゴール） • 伝えることを3行で要約してみる • タイトルとサブタイトル （補足や別の視点） • 目次
- 27. 記事の組み立て②（組み立て） • フォーマットを決めると楽 • リードで最初のつかみ （アイスブレイク・問題定義・ゴール提示） 「へぇ。そうなんだ（もっと読みたい）」 • 目次を見出しにして、本文を書く • まとめで最後に念押し （個人的な見解や感想、展望なども）
- 28. 記事の組み立て③（練り上げる） • 時間をおいてから、推敲する • 最初はたくさん書いて、後からダイエット • 口に出してスムーズに読めるか？ • 語尾が同じにならないように （動詞使いこなす） • 漢字とひらがなのバランス • 点や丸の位置
- 30. 【森和恵�(@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 >
- 31. 3. イマドキのウェブ制作フロー
- 37. • Bootstrapとは、CSSフレームワーク 「HTML＋CSS ＋ Javascript」で構成。HTMLページの土台 • 公式サイトは、 https://getbootstrap.com/ • 最新バージョンは、 v4.x • MIT Licence で、商用利用もOK Bootstrapとは？