架空のサイト作り2回目、歯科クリニックのWebサイト。 1.架空のサイトの情報をまとめる 2.Figmaでモックアップを作成 【気をつけたこと】 やわらかい印象にするため、ペールグリーンの背景と曲線で切り抜かれた画像を使ったヒーローイメージに 清潔感を出すために差し色としてライトブルーを使う スマートフォン表示版はヒーロー画像を切り抜きではなく全幅表示に 予約ボタンをヘッダーエリアとアクセス情報エリア2箇所に設置し、予約画面へ誘導する 診察時間の表も2箇所の予
Webデザインの勉強として架空のサイト作りを始めました。 週報形式でやったことを記録していたけれど、成果物ごとの方が記録を残しやすいので編集して再投稿します。 1.架空のサイトの情報をまとめる 2.Figmaでモックアップを作成 Figmaはまだあまり触ったことがなかったので都度調べながら操作しています。たくさん機能があって使いこなせたら便利なんだろうな、という感覚はある。 3.コーディング この段階でFigmaでのモックアップを手直し。コンセプトの部分を目が引くよ
256timesのフロントエンド実案件をイメージしたクラスを受講しました。 256timesとは、動画でのプログラミング学習サービス『ドットインストール』が運営しているオンラインのプログラミング勉強会で、CSSやJavaScriptの基礎を学ぶことができます。1クラス¥500で受講でき、3〜5日間、毎日出される課題を解いていきます。 今回受講したクラスは出題範囲がHTMLとCSSでJavaScriptも使用可というクラスでした。 以前CSSのクラスを一通り受講して有用だな
第二子出産でデザインのドリルをやっていたころから随分間が空いてしまいましたが、勉強を少しずつ再開しました。 その中でCSSの基礎を固めたいなと思い、256timesを受講してみました。 256timesとは、動画でのプログラミング学習サービス『ドットインストール』が運営しているオンラインのプログラミング勉強会で、CSSやJavaScriptの基礎を学ぶことができます。1クラス¥500で受講でき、3〜5日間、毎日出される課題を解いていきます。 CSSのクラスを一通り受講した
デザインのドリル（https://www.socym.co.jp/book/1257）完走しました。 【やってみてどうだったか】 ■デザインの引き出しが増えた 要素のグルーピングの仕方や対比構造、写真のレイアウトなど、特に構図周りの引き出しが増えた。要素を整然と並べがちなので曲線を活用したり散りばめるようなレイアウトはとても勉強になった。 ひとつのテーマにつき複数パターン用意されていたのもすごくよかった。 ■Illustratorが前より使えるようになった Illust
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson5：構成（上級） 演習30［デザイン模写］ヨガ教室のチラシ ■使用ソフト Illustrator ■感想 自分にはやりやすいパターンだったようですんなり形に。曲線やグラデーションを使ったレイアウトはやわらかく上品に仕上がるなと思った。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson5：構成（上級） 演習29［デザイントレース］レストランのメニュー ■使用ソフト Illustrator ■感想 グルーピングの演習。PatternAのような構図は思い浮かぶけど、メインの例題のような大きさの違うものをうまく並べる配置は自分の中からは出にくい構図なので引き出せるような位置に入れておきたい。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson5：構成（上級） 演習28［デザイントレース］映画のチラシ ■使用ソフト Illustrator ■感想 動きのあるレイアウトの作り方を学ぶ演習。やわらかい題材には曲線が合うことは感覚としてわかるけれどどうやって使えばいいのかは難しい。波うつようなレイアウトや写真を斜めに貼るのはよく見かける。文字を線の形に合わせるとまとまりがでるなと思うなどする。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson5：構成（上級） 演習27［デザイントレース］雑誌の特集記事 ■使用ソフト Illustrator,Photoshop ■感想 グリッドレイアウトの練習ということでキャンバスにグリッドを表示して当てはめていった。基本を整然と配置し、目立たせたいところをグリッドから外すという手法はインパクト出るしおしゃれだけどセンスがいるなあ。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson4：写真 演習25［制作練習］日本茶専門店のショップカード 演習26［制作練習］ヘアサロンのDM ■使用ソフト Illustrator,Photoshop ■感想 文字の入れ方がとてもむずかしい。演習26は特にどう入れたらいいものか迷った。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson4：写真 演習24［デザイントレース］カフェ新規開店のDM ■使用ソフト Illustrator,Photoshop ■感想 Pattern Bは感覚的に頭の中の引き出しから出せそうなんだけどPattern Aは入っていないのでこういうのが出せるようになりたい。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson4：写真 演習23［デザイントレース］スイーツ店のチラシ ■使用ソフト Illustrator,Photoshop ■感想 昔よりパスでの切り取り方が上手くなった。Photoshopの選択機能の性能も上がっているので随分と楽になった気がする。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson4：写真 演習22：旅行代理店のポスター（デザイントレース） ■使用ソフト Illustrator ■感想 写真背景＋かわいらしい文字の組み合わせ、確かに旅行の広告でよく見る。写真を使ったレイアウトでぱっと思いつくのは全面配置か中央配置だけど一辺の断ち落としもおしゃれだ。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson4：写真 演習21：フリーマガジンの表紙（デザイントレース） ■使用ソフト Illustrator,Photoshop ■感想 写真の切り取り方は『なんとなくこうするとよさそう』という感覚だけあるけど理由を説明しようとすると答えに窮してしまうので、理由付けがしっかりできるようになりたい。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson3：文字 演習20（デザイン模写） ■使用ソフト Illustrator ■感想 文字の枠線と塗りをずらすのは簡単にかわいくできるのでとても気に入っている。 飾り枠を作るのに一苦労。パスの形成はなかなか慣れない。
デザインのドリル（https://www.socym.co.jp/book/1257） Lesson3：文字 演習19 ■使用ソフト Illustrator,Photoshop ■感想 写真の上に文字を置くとき自分でやるとどうにもしっくりこないことが多かったけれど、文字色と背景色のバランスが大きな要因だったと気づく。
