【Web活動振り返り】Xd収穫祭【9月-4週目】
旅行から帰ったら、一気に季節が進んでいました。
秋服追加でホクホク、
はじめてXdさわってホクホクの1週間。
北の大地はすぐ雪が降って冬まっしぐら、
秋が特別みじかく感じるので
めいいっぱい秋をたのしんでいきたいところ！
Web模写
引き続き、こちらのページの模写を。
(https://nameoflove.com/)
参考書籍 : 久保田涼子「Webデザイン良質見本帳」SBクリエイティブ株式会社
コーディング
- ヘッダー・ハンガーバーメニュー再実装
旅行中、はじめて書いたもののクラス構成が
後にスクリプト追加する際と合わなかったので、整理して書き直し。
- スライダー/カルーセル実装(復習)
スライダー/カルーセルは、前にも使用したことのある
Flickity · Touch, responsive, flickable carousels を利用。
ヘッダーに設定追加、仕様通りクラス設けて、スクリプトを追加。
(Boostnoteが威力を発揮！)
- スタイル変化するヘッダー実装(new!!)
やり方だけ調査。参考になりそうなページ↓
ヘッダー・ナビゲーションを固定表示させるアイデア5つ – WEBDESIGNDAY
スクロールしたらヘッダを固定、ナビをちょっと変化させてみる。 | LittleThings
スクロールで高さが変わる上部固定メニューを作る | アプリコット
デザイン
- Xdでワイヤーフレーム/プロトタイプ作成(模写ページ)
はじめてのXd！！
調べていたらXdのアニメーションに興味がいき、
Webサイトの画像群も使用して
"プロトタイプ"を作っていました。笑
作成できたのが、こちらの2つ。
(2日間、合計7.0hほど)
- LP1ページ分(Web版)
- スライドアニメーション(画像4枚が自動でスライド)
※出版社へ問い合わせたところ、
使用画像の著作権考慮のために画像を差し替えてから掲載することになりました。
12/19 現在、対応中。
ページ1ページ分で、
- スクロール時ヘッダー固定
- FontAwesomeアイコン使用
- アニメーション追加基本
- リピートグリッド
スライドアニメーションでその作り方を。
※記事にまとめました
fuchsia-84.hatenablog.com
全体では、
- プレビューの出力
- アートボードの書き出し
- 各種ショートカットキー
を学習。
色彩検定
テキストを読み慣れてきた、というより
試験の難易度が体感できず間延びしてそうなので過去問をポチり。
来週から問題集に移行。
その他
アウトプット時に知ることができたこと :
次週
引き続き、コーディングとデザインの模写。
色彩検定は問題集へ。
さいごに
今回、新しくさわったものがかなり多かったので
これから個々にタイトルをつけて記事にします。
こうなってくると、1週間振り返りスタイルより
個々記事ベースのがブログとしてしっかりするかも。
(別記事まとめ次第、リンク追加予定です。)
