4月25日 -ロゴ、favicon、デザインの基礎-
１．今日の目標
課題としていたロゴ、faviconを作るためにDAY23の「ロゴ・画像作成に便利なオンラインサービス紹介」を進める。
２．結果・感想
気付いた。はてなブログにstyle指定できる。でもCSSってどこに書くのかまだわかってない。上のダッシュボードのデザインの記事の所にCSS書いていいのかな。あとでやってみよう。とりあえず即席で枠で囲ってみた。これは楽しくなりそう。ロゴやfavicon作らずにデザイン関連の基礎知識読み漁ってしまった。なかなか奥が深そうだ。
ロゴは自動で作れる様子。hatchfulってサイトを使うとスマホでもPCでもジャンルと言葉を決めてランダムで生成してくれる。すごい時代。faviconに関しても画像があればそれをもとに自動生成してくれるらしい。０から静的サイトをHTMLコーディングする際の流れについては、今までAtomで模写をする時に毎回のようにやってきた流れなので理解できている。kozue blogというサイトがすごく良い感じにCSSの情報がまとめられていたので参考にした。ここを見ていくだけでかなり基礎的な知識はつきそう。あれ、脱線してる。30DAYSトライアル1日目のDXのpassが見つからず脱線してしまった。困った。もうけされているのかな。
３．学んだことの書き出し
ワイヤーフレーム＝デザインの下書き
ワイヤー(線)とフレーム(骨組み)、画面上の「どこに何を」配置するのかを示し、本番用デザインの「設計図」として利用する
ワイヤーフレーム作成の流れ
①掲載する情報を整理
配置する情報を「ピックアップ→グルーピング→ランキング」の順番で進めると、うまくまとめられる。
ピックアップ：配置する情報の洗い出し。「ロゴ」「電話番号」「あの画像」「あの文章」など。
グルーピング：仲間同士の情報を見つけてグループ分けする。同じグループの情報は近くに配置するのが基本。
ランキング：優先順位をつける。
②レイアウトを決める
画面をどう分割するか。
マルチカラム：2カラム、3カラム(カラムは列、ローは行)。構成はヘッダー、コンテンツ、サイドバー、フッター
シングルページ：1カラム。小さな画面でもコンテンツに集中してもらいやすい。ページ数が多く、階層が深いホームページには不向き。
フルスクリーン：画面全体を一枚のキャンパスと見立てる。
タイル：画面をタイル状に分割したレイアウト。多くの情報を一度に提供できる。読ませるタイプのコンテンツには不向き。
③紙とペンで下書き
④ツールで清書
コンセプトダイアグラムを学ぶとホームページ作成が楽しくなる。
コンセプトダイアグラムとは絵を描きながらホームページに必要なコンテンツや機能を見つける方法
アクセスした人の「サイト内のコンテンツの巡り方」「問い合わせや注文にたどり着くまでの道のり」「気持ちの変化」を整理することが出来る
完成した絵を見ると、一目でサイトの全体像を把握することが出来る
コンセプトダイアグラムの作り方
①サイトのコンセプトを決める
このサイトは誰に何を提供するのか(５W２H)
・(what)サイトで何を提供するか
・(when)季節限定、期間限定、即日配達などの時間的メリット
・(where)地域密着、全国展開、場所に関連する強み
・(why)なぜあなたのサイトを選ぶのか、他社と比較して負けない強み
・(who)誰に向けたサイトなのか。客層を具体的にイメージ
・(how)マンツーマンレッスン、オンラインレッスン。どのように提供するのか。提供方法による強み
・(how much)いくらで提供するか。富裕層狙い？求めやすい価格？
②ターゲットを分類する
誰に提供したいのか。お客さんの分類。年齢、性別、性格etc
③描く
お客さんがサイトに訪れるきっかけ
お客さんにとってのサイトのゴール
お客さんに見せるべきコンテンツ
お客さんがサイトを去ったり次のページに行く分岐点
分類したターゲットごとに絵を描いていく
XDのデザインカンプからコーディングする
デザインカンプからコーディングすることがコーダーとしての仕事の全て
0から静的サイトをコーディングする際の流れ
①ファイル一式を格納するフォルダ作成
②トップページのHTMLファイルを作成
③CSSファイル、JavaScriptファイルの作成＆格納フォルダの作成
④HTMLの型を作る
⑤HTMLからCSSとJavaScriptへパスを通す
⑥画像を格納するフォルダの作成
⑦読み込むファイルは必要に応じて増やす
⑧デザインを見てコーディング
⑨ファイル群を納品
⓪!inportantをつけたもの(強制的に最優先)
①要素を特定したIDセレクタ(タグとIDの併用)
②要素を特定しないIDセレクタ(IDのみ)
③要素を特定したclassセレクタ
④要素を特定しないclassセレクタ
⑤タイプセレクタ(HTMLタグのみ)
⑥全称セレクタ(*)
疑似要素の例
構造的な疑似要素
最初の子要素(;first-child)
最後の子要素(:last-child)
唯一の子要素(:only-child)
絶対的なサイズ
in(1in = 25.4mm)
mm
cm
pt(72pt = 1in = 6pc)ポイント
pc(1pc=12pt) パーセク
相対的なサイズ
ex:"x"の高さを基準(=1)とする時のサイズ
em:1文字分の高さを基準(=1)とする時のサイズ
px:画面のドット(解像度)1つ分が1px
％
単語による指定方法
align(center/left/right)
vertical-align(middle/top/bottom)
margin(auto)
CSSのルールについてのもの
inherit(親要素であるタグの設定を継承する)
\:エスケープ記号
フォントの指定
font-family:フォント名;
serif(明朝体)
sans-serif(ゴシック体)
monospace(等幅フォント、固定幅フォント)
文字の太さの指定
normal:通常
bold:太い
bolder:やや太い
lighter:やや細い
inherit:親要素の指定を継承
文字スタイルの指定
normal:通常
italic:斜体、筆記体っぽい
oblique:斜体、単純に斜めに倒した
font-variant
normal:通常
small-caps:すべての文字を大文字書体で表記(文字サイズはそのまま)
inherit:
font
プロパティの記述には順番が存在する
font:<font-style><font-variant><font-weight><font-size><line-height>font-family
行間の指定
line-height
px,em,ex,%,単位指定なし
文字の配置
text-align(left/right/center/justify両端揃え、英文字の文章に指定できる)
text-alignは文字の配置についてのみ使用可能で画像やブロックの配置には使用不可(基本的に)
リストの表示方法
ulで指定が可能なもの
disc:円形(中黒や中点)
circle:中空円(白丸)
square:四角(塗りつぶされたもの)
olで指定が可能なもの
decimal:数値
decimal-leading-zero:数値(ゼロ埋め)
lower-roman:ローマ数字(小文字)
lower-alpha:アルファベット(小文字)
lower:upper 小文字:大文字
list-style-position
none(表示しない)
inside(ブロックの内側)
outside(ブロックの外側)
inherit(親要素の継承)
コーディング力とは「構造を把握する力」「デザインを共通化する力」「よく使うHTMLタグを瞬時に使える力」
クラス名の命名規則
どの文章をhタグに入れるのか
googleデジタルワークショップにて
デジタルマーケティングスキルの向上
媒体を選ぶ、自社で作るか依頼するか、予算とスケジュールたてる
何を達成したいかを事前に考える
何のためにサイトを作成したいか
段階的に目標を設定する
ウェブサイトやアプリは自社を知ってもらう拠点となる
無料で検索結果に掲載：自然検索
有料で検索結果に掲載：検索連動型広告(オークション方式)
ディスプレイ広告、メールマガジン
４．明日の課題
模写を頑張ってみる
５．参考ＵＲＬ
ワイヤーフレーム作成の流れ
http://websae.net/wireframe-20150303/
コンセプトダイアグラムの作り方
http://websae.net/concept_diagram_20130327/
ロゴ自動生成のサイト
favicon自動生成のサイト
https://ao-system.net/favicongenerator/
０から静的サイトのHTMLコーディングするときの流れ
https://haniwaman.com/zero-coding/
プログラミングで月収5万円になるまでの記録
けっこう細かくまとめてあってすごく参考になる。情報量が多い。
