110日目 | web制作
本日は…
■ポートフォリオ続き
108日目 | web制作
本日は…
■モバイルファーストのレスポンシブサイトを制作する
fontのショートハンド＞サイズ/line-height font-family
スマホ版データ
ここを見本に後日制作。
＜ポイント＞
・display tableを使って横並びにしてやる方法がある
→ulに対して指定してやる
（display:tablecell）
・textのindentで字下げをしたい＞
htmlではspanを使って区切りを作る
全体にpaddingを入れ、右にずらしておく
spanで囲んだ部分を-marginで左側に戻してやる
↑プロフィールなんかで使える
・css3でborderをbox自体にかける＞border-boxがある
・rubyタグの使い方＞ふりがなをふりたい文字をrubyタグで囲む
＞その中にrtタグでかこんだ、よみがなを記述
<ruby>暴風雨警報<rt>すっごくやばいあらし</rt></ruby>接近中！
これで見えるはず。
利用して色々楽しめそうだけどできるブラウザは限られている。
・縦書のしかた
ひとまずはこっち↓
■ポートフォリオ
スペースは広く使ってよし
→デザイン再考＞シンプルなのがいいんじゃないかな
106日目｜web制作
本日は…
■google noto font
＜webフォントとフリーフォント＞
印刷には使えないwebフォント（true type）
フリーフォントはオープンタイプであることが多い。
マルチプルマスター：ウェイトを自分で変えられる（trueだとできる。例：googleフォント）→今はもうないけど。webフォントにつながった
＞noto font日本語にも対応している→スピードが遅いのが難点…。
普通にパソコンに入れて使うこともできる。ｐｓで加工したりもできる。
■まだFireworksを使っているところも多い。。。
スライスを構造管理できる＞レイヤーわけできる
cf)ｐｓは一枚でしか管理できない
＞シンボルなんかができればいいかもね
■カンプはほぼ完成形のこと…
■レギュレーション
・全体の統一性→使うフォントの種類は和、欧それぞれ３〜４が限界
・命名規則
ルールに沿って作ることが仕事の基本。
・仕様書を作るのも仕事！
■ポートフォリオ
・自分が向かいたい方向に合わせて作る！
■企画を作るとき
ストーリーを作る
＞誰に向けて、どんな感じで作るか
■自分の体験をもとにWEBをやりたい理由を物語で伝える
実技課題：レスポンシブ・ウェブデザイン シンプル２カラム
・PC スマホ（フォント 単位：rem）
ロゴ横長に変化 アコーディオンはPCサイトにもスマホにもついてる
PC:９６０〜１２４０ｐｘ
スマホ：６４０ｐｘ
・CSSとスマホ対応、jQueryを入れられる
・フルードイメージ
・文字を飛ばさなくていい背景画像指定をどこかに入れたい
・メディアクエリ入れる
・見出しを飾りとしてｐｓかAIで作れるといいな（テキストをどうするかは任意）
HTML CSS
スマホ対応 jQuery
各２５点＞エラーで減点
■jquery mobileを使う
data-roleがページ１つ分を表している
<div date-role="page" id="○○○">
情報が少ないサイトにしか向いていない
date-theme を変えてやると雰囲気が変わる
themeroler的なものが公式サイトにあり、それで色を変更して、好きなデザインa~dと作っていく
＞DLして使う
list deviderの後ろにこれを入れるまた変えられる
公式サイトでサンプルを見られる
＞＞時間があれば作ってみよう。あれば。あれば。。。
tips
APIをどううまく使っていくかもポイント
■google API（LINEは企業相手じゃないと売ってくれない）
googlemapで緯度経度を取得してやる＞周辺のつぶやきだけ拾うというのもある
105日目 | web制作
本日は…
■先日の卒業生のポートフォリオサイト講評
＜ポートフォリオ制作の上で大事なこと＞
・企業サイト制作については詳しく、別立てでやるくらいのことをしてもアピールすべき
・制作時間と使用ツールくらいはクリックしなくても一覧から見られるようにしておく
・作る目的は就職に役立てること。作品集ではない！！
・自由に作っていいが、見せ方より中身をしっかり作るべき
・自由だがユーザビリティはしっかり考える（人に見せて就職活動するためのものであるということを忘れない）
・パーツをつくれる（バナーと見出し、ボタンのセット ex)女性向け、カッコイイ系、ウェディングなど）ことをアピールしてもいい
・作ったパーツをコーディングで組んで見せるのも（OK背景含め)
一人前のwebデザイナーを目指して｜webnotebook
伝説のポートフォリオ↑
■テスト返却
■トロうまコクうまを作ってみよう！
久々のai！！
１．塗りなし/線黒で、幅高さ６０ミリの正円を作る
２．alt押しながらコピーして１０個の○で雲型を成形する
３．パスファインダーで一体化して、複合パスを解除、内側のもくもくだけ削除する
４．アピアランスのウィンドウを表示、線の太さを20ptにし、線の色をM４０％Y100%にする
５．アピアランスから線のところを選んで、角の形状を丸くする
６．塗りを選択スウォッチ＞スウォッチメニュー＞スウォッチライブラリ＞パターン＞ベーシック＞ベーシック点＞大きさが変化する点（小）を選択
７．オブジェクトの再配色ボタンクリック＞黒のところを選んでさっきの線と同じ色にする（選択されているかしっかり確認！）
８．もう一枚塗りをアピアランスで追加して、M10%Y75%で塗る
９．とろうまの文字を雲の上に移動（オブジェクトの重ね順に注意）
１０．文字にアピアランスをかけるので、文字のアピアランス＞内容をクリック
１１．塗りを追加し、パスの一部にオフセットを作る→効果＞パス＞パスのオフセット（cf）オブジェクトからのオフセット）
１２．オフセット3mmにする
１３．グラデーションのパレットを出して、３こ（a:０．b:５０．c:１００％）にポイント作る（a＝Y:50%,b＝M:15%,Y:90%,k:5%,c=M:50%,Y:100%,k:10%）
１４．同じ塗りに対して新規効果＞スタイライズ＞光彩内側＞＞描画＞覆い焼き(カラーをC:15、M;20,Y:85にする)
１５．ドロップシャドウをかける（1.5mm/1.5mm/2mm）
１６．とろうまの文字色を茶色にする
１７．文字に光彩内側（60%,75%,100%,40%）の茶色
ちょっと番外
＜キラキラを作る＞
①楕円ツールで丸を描く
②効果＞パスの変形＞パンク・膨張（パスの数によって変形する）
完成するとこんな感じ。
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
・ポートフォリオサイトで必要な素材
ライト ウォールステッカー 棚 プロフィールのところの絵 収納 本文そのもの
・考えるべきこと ギャラリー部分のクッション（こと解説）ページに使えるjQuery探し→がっつり説明する
企業サイトのページの見せ方（ここだけ縦にも？？）
104日目 | we制作
本日は…
■ポートフォリオ制作の続き
少し形が見えてきた…かな？
やったこと
・窓を作る(CSS3待ち)
・横スクロールを入れてみる
・壁にかけるフォトフレームのイメージ
・プロフィールの中身検討
やること
・横スクロールでイメージ通り実現可能なのでサイトを組む
→必要な素材
・棚の基礎、中身(クリックで横スクロール先&プロフィールに飛んでいく)
・プロフィールに使う素材いくつか
・以下略
