バナートレース008/100
見本・トレース
見本
トレース
所感
- 全体的にシンプルで内容がしっかり伝わるバナーだと思った。
- ロゴ「キミハツ」とキャッチ「働くキミをハツラツに」の幅が揃っていて、バランスが取れている。
→ 幅を揃えるために、文字幅を広げるのは有効。
→ 幅を広げることでできた余白があるため詰まった感じがしない。 - CTAは「キミハツとは？ →」
長方形とはみ出した三角形を合わせることで単調なボタンにならず、デザインにアクセントがある。
また、長方形に透明感をつけることで三角形を目立たせて、→を強調しているように思う。
【Bootstrap】orderクラスで列の入れ替えして表示順を変える。
モバイルからみた時に、画像とボタンの表示順を入れ替えたくて調べてみました。
参考
とてもわかりやすかったです。。！感謝！
【Bootstrap4】グリッドレイアウト（並べ替え） – niwaka-web
そもそもサイズの概念がわかってなさすぎることに気づき、こちらでおさらいしました。 websae.net
イメージ
PCの場合
ロゴの下に、ボタン、画像の順で並びます。
スマホの場合
ロゴの下に、画像が来てその下にボタンが表示されます。
order を使う
画面サイズが767px以下の場合はHTMLで書かれている順番（画像→ボタン）で表示し、
画面サイズが768px以上の場合（md）はorder-md-*の順番で表示します。
<div class="container">
<div class="row">
<h1>NEVER STOPPING!</h1>
<div class="col-12 order-md-2">
<img src="image.png">
</div>
<div class="col-12 order-md-1">
<a class="btn">LOGIN</a>
</div>
</div>
</div>
スクロールするとヘッダー/ナビゲーションにシャドウがつく
スクロールするとヘッダー/ナビゲーションバーにボックスシャドウがつくのを取り入れたくて、散々調べたところ理想のソースコードを発見しました。感謝！
イメージ
実際の技術は違うかもですが、こういう感じです。
zozotown
slack
よりシームレスなチームワークを実現する、ビジネスコラボレーションハブ | Slack
ソースコード
とてもシンプルでわかりやすい！
jQueryを使うのでjQueryのスクリプトタグを埋め込んでください。
埋め込み方はこちらの記事を参考にしました！感謝！ macoblog.com
メモ
overflow: auto;
サンプルだと「HEADER」という文言だけですが、それ以外にもたくさんあった場合にどう表示させるかの指定。
transition: all 0.15s linear;
シャドウをふわっと表示させるアニメーション。 allは対象、linearはイージングの種類で「一定」という指定とのこと。
developer.mozilla.org CSS3プロパティ transition | HALAWATA.NET
雑感
今回調べるのにめちゃくちゃ時間がかかったので、ググる力が足りないなと痛感しました。 でも理想のものを見つけられて本当に良かったです。。
もし同じように困ってる方の助けになったらいいなと思います。
メールフォーム/コンタクトフォームを作りました
仕事でメールフォーム/コンタクトフォームのデザインと、HTML・CSSのコーディングを行なったので、その時に調べたことなど色々メモします。
リサーチ
- 入力項目
名前、メールアドレス、お問い合わせ内容 など。 - 入力項目の名称、順番
名前を入力させるところの項目名は「お名前」なのか「NAME」なのか。
項目の１番始めは、企業名にするか、など。 - プライバシーポリシーへの同意
「同意したとみなします」といった文言だけ表示する、同意したかどうかチェックボックスをつける、など。 - 必須項目のラベルのデザイン
必須のみ「必須」「＊」を入れるか、任意項目に任意ラベルを入れるか、などラベルのデザインをどうするか。 - 必須項目を選ばず送信した時のエラーメッセージのデザイン
Bankさんのコンタクトフォームだと、黄色のハイライトでエラーメッセージが出る他、送信ボタンの文言も変わります。かっこいい。
- 内容確認画面の有無
送信ボタンを押した後に、内容確認画面があるかどうか。
確認画面を置く場合は内容確認画面のデザインとコーディングが必要になります。
内容確認画面があるサイトが圧倒的に多かったですが、すぐに送信されるサイトもありました。
デザインをする前に・・
色々調べてデザインを作ろうとしていたのですが、かっこいいアニメーションをやりたくても、どうすれば良いのか皆目見当がつかないことに気がつきました。恥。
コーディングができなかったら、デザインもできない。
今回は急ぎで作らないといけなかったので、デザインフレームワークMaterializeを使用して、コーディングを加味したデザインにすることにしました。
デザインをする
Materializeの「Form」から使いたいデザイン？フレームワーク？を選びます。
こんな風にアイコン付きにしたいな とか。
選び終わったら、Adobe XDでフォームの大きさ、文字の色、アイコンの大きさなどのデザインを作りました。
コーディングをする
デザインが決まったらコーディングです。
- MaterializeのCSSファイル、jsファイルが入ったzipファイルをダウンロードし、必要なディレクトリに格納します。
Getting Started - Materialize
の「Materialize」からダウンロードします。 - CSSファイル、jsファイルを読み込むリンクを<head></head>に記述します。
Getting Started - Materialize
「CDN」に記載されています。 - 必要なHTMLのソースコードをコピーして貼り付けます。
これはどういうタグなんだろう、と少しでも疑問に思ったら調べるようにしていました。
意味を調べながら、 必要なソースコードだけ貼り付けます。 - Chromeでデザインを確認し、自分の考えたデザイン通りになるよう、開発者モードでstyleを修正していきます。
修正が必要なclassは、materializeのCSSファイルに直接書き込むのではなく、自分で用意したCSSファイルに上書きするように修正していきます。 - Mterializeに記載されていないHTMLを付け足します。
例えば、必須項目につける「required」であったり、必須項目のラベル、プライバシーポリシーのチェックなど。
いろんなサイトのコーディングを真似して試してみての繰り返しでした。 - レスポンシブのデザインを確認します。
レスポンシブのデザインも必要に応じて修正します。
Materializeはレスポンシブに対応していますが、自分が想像していない表示になっていることもあるので、ちゃんと確認します。
送信確認画面のコーディングはtableで対応しました。Materializeのtableはレスポンシブの場合に横並びになるので、必要に応じて修正します。
プログラムの部分はHTMLメール同様、エンジニアの方にお願いしたので、一旦これでフォームは完了です。
ローカル環境だと鈍いのかアニメーションの速度が遅かったのですが、本番に反映するとビシバシ動いたので、その後も細かく修正したりなどしました。
今度はMterializeを使わないデザイン、コーディングができるように、javascriptも学ぼうと思いました。
覚えることいっぱい！
終わりです。
