文系大学生が未経験からのWebデザインの勉強記録をメインに書いていきます。その他自身の体験や思ったことをゆる~く書いていきます。
今日の学習 今日はセクション4「KAWAIIポップなヘリのイラスト」とセクション5「オブジェクトの七変化」を勉強した。 セクション4 KAWAIIポップなヘリのイラスト 可愛いヘリコプターのイラスト作成。 きかんしゃトーマスにでてきそうな、窓に顔があるヘリを描いた。 前回の単調な家のイラストよりも難易度が上がっており、曲線などが出てきた。 少し難しくて、何回も動画止めたり巻き戻したりと、、 結構時間がかかってしまった。 ペンツール難しいなぁ~。 セクション5 オブジェクトの七変化 オブジェクトの基本的なことを教わる講義動画。 今までのセクションやPhotoshopでの経験があったので、ほぼ復習…
頭の中がごちゃごちゃだから一旦Web.UI.UXデザインの違いを整理する(メモ書き)
WebデザインとUI/UXデザイン Webデザインの勉強を始めて3ヶ月。 勉強に落ち着きが出てきたので、最近色んな人に会っては色んな話を聞いている。 あと就活生てことで求人も見ている。 そこで始めてUI/UXデザインってのを知った。 企業の求人もほとんどUI/UXデザイナーしか求めてないし、周りもUI/UXデザイナーを目指す人がほとんど。 もはやWebデザインってオワコンなの?? そう思い始めるようになった。 ってかそもそもUI/UXデザインって何? 俺は何を目指せばいいの?今やるべきことは? と、疑問がいっぱい出てきて錯乱状態になってしまった。 周りにデザイナーを目指す人いないしなぁ、、 ひ…
今日の学習 テックアカデミーは終了したが、Illustratorはカリキュラム外であった。 そこで、Udemyを使ってIllustratorを学ぶことにする。 今回はIllustratorの基本的な使い方と簡単な作図をした。 セクション2:簡単な図形イラストを描いてみよう セクション1は何やら準備?みたいな感じだから飛ばした。 PhotoshopとかXdとかAdobeソフトは使ってるからまぁいっかと。 てことでセクション2から入っていく。 今回は簡単な図形を使って家を描いた。 早速イラスト制作。 四角とか丸とかはPhotoshopとかでたくさん使ってきたからすんなりできた。 しかし、問題はペン…
ReDesigner for student meet up 2020に行ってきた
デザイナー専用の合説? 先日、ReDesignerが主催するmeet upイベントがあったので参加してきた。 今回はその感想を記そうと思う。 流れとしては、7社分の企業説明をして、次に企業の方や参加者の交流会という感じだった。 参加企業はLINE、クックパッド、DMM、日鉄ソリューションズ、レバレジーズ、フェンリル、Goodpatchであった。 それに対し学生は約100人。 やはり最近の流行り?からかUI/UXデザイナーを目指す学生が多かったし、企業側もUI/UXデザイナーを求めていた。 率直な感想 まず、様々な企業の方や同じデザイナーを目指す就活生の話が聞けてめっちゃためになった。 Webデ…
テックアカデミーの次は… テックアカデミーが終了したので、ポートフォリオを作っていく。 インターンや新卒採用にはポートフォリオがかかせない。 ポートフォリオ一つで俺の人生が変わってしまう。 だが、この時期に一から作っては間に合わない。 だから、テックアカデミーで作ったポートフォリオを編集することにした。 テックアカデミーのポートフォリオは、作りは簡易的であるが、逆に言えばシンプルなので見やすい。 またフレームワークはできているから、中身を入れかえればいいだけ。 なのでサクッと完成させた。 1.スキル・制作物の変更、文字追加 まずはデフォルトの文字を変え、足りないところは追加。 また、分かりやす…
今日の学習 テックアカデミーのカリキュラムは一通り終わったが、付属でついてきたGitHubのレッスンを学んだ。 lesson14 バージョン管理ツールGit ここではGitの使い方を学んだ。 企業の求人などをみてるとGitHubを使っている企業は割と多いので使えた方がいいと思った。 だが、考えが甘かった。 まぁ理論は何となく理解できたのだが、俺の苦手なターミナルの嵐だったので苦戦した。 途中から何をやっているのか意味わかんなかったし、テキストのコピペしてるのにテキストと違う表示が出てきてマジで意味不だった。 まとめ 結果、分かったのはGitはターミナルをたくさん使う。以上。 少しプログラミング…
テックアカデミーWebデザインコース day27 受講終了!
今日の学習 テストなどがあり日が経ってしまったが、テックアカデミーWebデザインコースのカリキュラムが終了したので一応記録する。 最終日はオリジナルサイトのグローバルメニューの修正、背景色の修正、Javascriptの読み込みをやった。 lesson13 オリジナルサイト まずはレビューで指摘されたグローバルメニューから。 前回の抜け漏れの修正はすんなりできた。 だが、タブレットサイズのグローバルメニューが苦戦した。 画面サイズを変えるとどうしても崩れてしまう。 marginの-指定とかいろいろ工夫してなんとか修正できたが難しかった。 次に背景色。 元々は真っ白でシンプルな作りにしようかと思っ…
今日の学習 今日の学習時間は約3.5時間。 今日もオリジナルサイトのコーティングを進めた。 lesson13 オリジナルサイト トップページの細かい修正から。 文字の大きさだったり色だったり。 それが終わり、下層ページの制作に入っていく。 だが、下層ページもトップページと構造がほぼ一緒だから、トップページをコピペして内容だけ変えて終わり。 てことで一旦オリジナルサイト完了~! いやー長かった。 と、一息ついていられたのもつかの間。 レビューが帰ってきて再提出になってしまった。 内容は、グローバルナビゲーションの修正。 画面の大きさによって位置がズレちゃうからそれを治せと。 まぁそれだけか、簡単…
テックアカデミーWebデザインコース day25 コーティング
今日の学習 今日の学習時間は約5時間。 今日はオリジナルサイトのコーティングを進めた。 lesson13 オリジナルサイト 今日は主にヘッダーのナビゲーション作りをした。 ナビゲーションを作るのに、ハンバーガーメニューを実装した。 だがこれが大変だった。 まずネットで調べてコピペして自分なりに編集して。。 一件簡単そうに見えるが、答えがないから無駄に細かいとこまでこだわってしまった。 その結果、1つ作るのに1.5~2時間近くかかってしまった。 それをpc版とsp版。 ハンバーガーメニューだけで1日が終わってしまった。 でもあともう少しで完成する。 まとめ オリジナルサイトは良くも悪くも突き詰め…
テックアカデミーWebデザインコース day24 デザインカンプ
今日の学習 今日の学習時間は7時間。 今日はオリジナルサイトのデザインカンプとコーティングをした。 lesson13 オリジナルサイト デザインカンプ作りから。 メンターに教えてもらってXDを使って作ってみた。 本来XDはカリキュラム外だが、時間が余ってるからと使い方を教えてくれた。 そこでXDを使ってデザインカンプを作ってみたのだが、予想以上の手軽さにびっくりした。 Photoshopよりもサクサクできて簡単だった。 cacooに近い感じなので、初めてでも特に問題なく使用できた。 おかげで1日でデザインカンプを完成できた。 次にコーティング。 テンプレサイトからダウンロードしてのコーティング…
テックアカデミーWebデザインコース day23 ワイヤーフレーム
今日の学習 今日の学習時間は約3時間。 今日はオリジナルサイトのワイヤーフレーム作りをした。 lesson13 オリジナルサイト 昨日考えたものを元に今日はワイヤーフレームを作った。 ただ作るのではなく、タイトルや文書も考えなくてはならなかった。 そこが結構大変だった。 大まかには決まっていたけど、具体的には決めてなかったからこのタイミングで考えることにした。 それ以外は特に何も無く、コーティングする3ページ分だけ作り提出した。 無事合格をもらえて、次はデザインカンプ作り。 横幅とかいまいち分からないから、明日のメンタリングでレクチャーしてもらうことにする。 まとめ この調子でいけば、金曜まで…
今日の学習 今日の学習時間は2時間。 今日はオリジナルサイトの企画を考えた。 新年早々インフルとマイコプラズマにかかり、ずっとパソコンとは無縁の生活を送っていた。 やっとこ回復して、少しだがパソコン触って感覚を取り戻そうかと思う。 lesson13 オリジナルサイト ようやくオリジナルサイトに入る。 まずは企画から。 企画はある程度まとまっている。 それは、イタリア旅行のブログサイト。 自分自身、夏にイタリア旅行に行ったのだが、その体験談のサイトを作っていこうかと思う。 そして、サイトマップ作り。 とはいえ、色んな考え方があり、なかなかサイトマップが決まらなかった。 最終的には、トップページ→…
今日の学習 今日の学習時間は約3時間。 今日もlesson12の課題を進めた。 lesson12 ショッピングサイト 残りの3ページ目のメインコンテンツ作りの続きから。 特に難しいことは無かったが、表の余白の調節や線があったりなかったりして、細々とした部分がめんどくさかった。 と、いろいろあったが、やっと終わった。 レビューはまだだし多分再提出くらうけど、達成感やばい。 過去一やばい。 これ作るのに10日くらい?費やしたんじゃないかな? でも、デザインカンプのみの模写で、だいぶ力はついたと思う。 この自信はだいぶ大きい。 次はいよいよ最後のオリジナルサイト作り。 企画からだから、超本格的。 も…
今日の学習 今日の学習時間は約4時間。 熱やら就活やらで、約1週間ぶりの投稿になってしまった。 しょうがないとはいえ、悔しい。 今日もlesson12の課題を進めた。 lesson12 ショッピングサイト 今日は3ページ目の商品詳細作り。 残すは1ページ。 しかも雛形はできてるので、メインコンテンツだけ。 これは余裕。 と思っていたのだが、これがまた難しい。 画像のスライドショーの部分の配置が全然出来なかったり、表がなかなか作れなかったり。 やはり久々のプログラミングだから、感覚が鈍ってて思うように作れない。 あとちょっとが、なかなか進めない。 まとめ 仕方なかったが、1週間の空きはものすごく…
テックアカデミーWebデザインコース day19 トップページ完成
今日の学習 今日の学習時間は約4時間。 今日もlesson12の課題を進めた。 lesson12 ショッピングサイト 商品リスト作りから。 フレームは昨日できてたので、複製してフレックスボックス指定して完成。 次はページ下のガイド作り。 ここが意外と時間かかった。 構造が結構複雑で、なかなか中央揃えにならなかったりと、苦戦した。 時間はかかったが、なんとかできた。 あとは昨日問題であったカルーセルのみ。 質問したけど、自分で調べてくださいと言われた。 調べても分からない言うてんのに。 明日メンタリングあるから直接聞くことにする。 明日からは残りの2ページを作ることになる。 ある程度の雛形がある…
今日の学習 今日の学習時間は約6.5時間。 今日はlesson12の課題を進めた。 lesson12 ショッピングサイト 昨日メンタリングで教えてもらったフッターとjQueryの修正から。 無事直すことができ、やっと先に進められる。 余白がおかしなところとかもあったが、昨日めっちゃ使ったデベロッパーツールを見て余白を修正した。 デベロッパーツールの見方を覚えると便利だね。 細かい修正などをし、ようやく全ページ共通の部分が完成した。 長かった。でもまだ半分ある。 道のりは長い。 次は画像のカルーセル作り。 練習で使ったOWL Carouseをショッピングサイトに持ってくる。 カルーセル自体はそん…
今日の学習 今日の学習時間は約6時間。 今日はlesson11の課題修正とlesson12をやった。 lesson11 コーポレートサイト 課題を提出して、レビューが返ってきた。 結果は再提出。 デベロッパーツールを見ながら手本通りの余白、文字を整えろと。 てことでデベロッパーツールを見ながら細かい修正をしていく。 だが、何が間違ってるのか全然分からず、だいぶ時間を食ってしまった。 なんとか間違いが見つかり、修正していったが、想像以上に時間がかかってしまった。 lesson12 ショッピングサイト フッターが分からなかったので、先に進めてサイドメニュー作り。 商品検索欄は、試行錯誤しながらもな…
今日の学習 今日の学習時間は約3.5時間。 今日はlesson12の課題の続きをやった。 lesson12 ショッピングサイト 続きのフッター作り。 もう分からなすぎて質問したのだが、質問しても全然解決されなかった。 これはメンタリングで直接聞くしかないな。 てことで先に進める。 あとはヘッダーのハンバーガーメニュー作り。 正直jQueryとか全然理解してないからほぼコピペ。 それでもなんか上手く表示されず、HTMLの構造を変えてみたところ、ちゃんと表示されるようになった。 感覚ではあるが少しjQueryを理解した気がする。 あとサイト内検索欄作り。 プロゲートで出てきたメッセージフォームがこ…
今日の学習 今日の学習時間は約3.5時間。 今日はショッピングサイトの課題を進めた。 lesson12 ショッピングサイト 今日はヘッダーとフッター作り。 ヘッダーとフッターはどのページでも作りが一緒だからこそ、肝となる部分。 だから、めっちゃムズい。 全然進まない、、 フレックスボックス指定しても全然動かないし、試行錯誤の嵐。 地道に修正してって、なんとかヘッダーは作り終えた。 問題はフッターだ。 フッターのリストがliなのかpなのか分からないし、思った通りの配置になってくれない。 分からず今日を終えた。 フッターの続きは明日。 まとめ デザインカンプのみの模写はマジでムズい。 手が進まなす…
今日の学習 今日の学習時間は約7時間。 今日はlesson11の課題とlesson12をやった。 lesson11 コーポレートサイト 昨日までにコーポレートサイトのトップページを終わらせたので、残りのニュースリリースと会社概要のページを制作した。 ヘッダーとフッターはトップページと同じなのでコピペ。 主にメイン部分をコーディングした。 スケルトンのグリッドを駆使してコーティングしていくのだが、グリッドをいまいち理解していなかったので途中ページがごちゃごちゃになった。 幸いお手本ページという答えがあるのでそのデベロッパーツールを見ながら直していった。 あと、途中でtableタグを使う箇所があっ…
今日の学習 今日の学習時間は約6時間。 今日はlesson11を進めた。 lesson11 コーポレートサイト 今日はまず途中だったデザインカンプから始めた。 デザインカンプ作りは割かし慣れてきた方ではあるので、特に問題なく進むことがてきた。 次にコーディングの続き。 コーディングもテキストを真似て書くだけだったので特に問題なかった。 と思いきや、問題ありありだった。 まず、急にjQueryが出てきたことだ。 jQueryなんか習ったことないし、基礎的な説明もなしにいきなり出てきた。 だからテキスト読んでもさっぱり理解不能であった。 あと、レスポンシブデザイン時に、ヘッダーのメニューが表示され…
テックアカデミーWebデザインコース day12 コーポレートサイト
今日の学習 今日の学習時間は約5時間。 今日はlesson11を進めた。 lesson11 コーポレートサイト 今日はトップページのデザインカンプとコーディング。 デザインカンプは結構実践っぽい内容で意外と難しい。 テキストでも「ここのサイズは自分で考えてください」みたいなところもあったので、応用だなぁって実感した。 事情によりデザインカンプは途中だが一旦先に進める。 次はコーディング。 スケルトンを使ってのコーディングだった。 ポートフォリオよりも構造が複雑で、理解がなかなか追いつけない。 また手書きで構造をまとめる作業が必要かもしれない。 続きはまた明日。 まとめ やっぱ応用だけあって難し…
テックアカデミーWebデザインコース day11 画像バグる
今日の学習 今日の学習時間は約5時間。 今日はlesson10の課題の直しとlesson11をやった。 lesson10 モバイルデザイン 課題のやり直し。 画像の縦横比がくるってるからそれを直す。 と思いきや、これが全くわならない! 高さ指定したら画像バグるし、背景画像に洗濯したら高さ指定できなるしてかそもそも画像が表示されないし。 画像urlも合ってるのに。 テキスト見ても全く分からないし。 だから質問した。 ところが、メンターはテキスト見てくださいの一点張り。 いやテキスト見てもわからない言ってんのにその答え方おかしいだろ!やる気なさすぎ!笑 もっと具体的に教えて欲しいわ笑 もう質問して…
今日の学習 今日の学習時間は約2時間。 明日の面接準備とか夜予定があるため2時間しかできなかった。 今日はlesson10の課題の続きをやった。 lesson10 モバイルデザイン 課題の続き。 中央揃えやレスポンシブデザインなどまだまだ完成には程遠い状態からのスタート。 それぞれ1つ書いて試してはの繰り返し。 いわゆる試行錯誤しながら1つずつ着実に進めていった。 余白など細かいところも修正した。 そしたらようやく完成した。 達成感が半端ない。 初めて自力でサイトを作れた。 CSSとかも試行錯誤しながら徐々に完成に近づいているのを実感して楽しかった。 課題レビューは再提出になってしまったが、そ…
テックアカデミーWebデザインコース day9 自力でコーディング
今日の学習 今日の学習時間はだいたい3.4時間? 計るの忘れたけど感覚値的にそれくらいかも。 今日はlesson10の課題のコーディングをやった。 lesson10 モバイルデザイン デザインカンプが終わり、いよいよ自力でのコーディング。 自力でのコーディングはプロゲートの道場コース以来。 とはいってもプロゲートは結構ヒントがあったから意外とクリアできた。 しかし、ホントに1からのコーディングは今回が初めて。 htmlタグとかheadタグとかのフレームワーク?はテキストからコピペ。 そしてbodyに入っていく。 プロゲートの道場コースの感覚で構造を書いていく。 HTMLのコーディングが終わり、…
今日の学習 今日の学習時間は約5.5時間。 今日はlesson10のコーディングをやった。 lesson10 モバイルデザイン 昨日の続き。 前lessonで作ったポートフォリオサイトをSASSを使ってレスポンシブデザインしていく。 苦手意識を持っていたSASS。 ターミナルを使いながら書いていくから苦戦した。 だけど、だんだん使っていくうちにSASSって便利だなぁって思うようになった。 HTMLみたいな構造でデザインしてくから、見やすく、変数やextendを使って省略できるから分かりやすい。 エラーが出てもターミナルが教えてくれるからすぐ直せるし。 慣れれば便利なものなんだなぁ。 ただcom…
今日の学習 今日の学習時間は3.5時間。 急遽バイトが入りあまりできなかった。 今日はlesson9とlesson10をやった。 就活とバイトが重なりしばらく勉強ができなかった。 今日からまた時間が取れるから再開する。 lesson9 ポートフォリオ:コーディング コーディングは2週回った。 1回目はコピペ、2回目は模写。 そしてその続き。 模写してて思ったんだけど、構造やクラスがごちゃごちゃしてたから、一旦ノートに構造やクラスをまとめてみた。 すると、ごちゃごちゃしてたものが整理ついて綺麗になった。 もっと深めて完璧にしよう、、と思ったけど、受講期間が始まり課題提出できるようになったから、ひ…
寝坊してしまった… やらかした。 普段は朝9時に起きている。 (暇人大学生からすると9時ってめっちゃ早起きっていう豆知識いる?笑) ただ、二度寝してしまったのだ。 そこは正直問題ない。 いつも5~10分後にタイマーをかけるので起きれる。 しかし、今日はそのタイマーをかけ忘れてしまい、気づいたら10時30分。 前日にスケジューリングしてたので、すべてがくるってしまったのだ。 あぁ、、、そこから午前中はぐだっていまった。 予定一つ狂うとダメだね。何もやる気がでなくなる。 本格的に勉強始めたのは午後からだ。 寝坊の対策 今後このミスを犯さないために、対策を考えた。 1.あらかじめ二度寝用のアラームを…
今日の学習 今日の学習時間は約5.5時間。 ひたすらlesson9を勉強した。 lesson9は情報量が多いから一筋縄ではいかない。 確実に理解していこうと思う。 lesson9 ポートフォリオ:コーディング 昨日からの続き。 まずはコピペして全体を掴み、そのあと解説を読んで詳しく理解した。 昨日疑問だったところの大体は解説してくれたので、疑問解消できた。 ただemとかremとかよく分からん。root属性?なんじゃそりゃ?笑 大まかには理解できたが、分量が多くてすべてをインプットしきれていない。 頭の中が情報でぐちゃぐちゃだ。 もう2~3周くらいして確実に知識を定着させたい。 そうすればサイト…
今日の学習 今日の勉強時間は約7時間。 lesson5の途中からと7.8と9の途中までやった。 lesson5 ポートフォリオ:デザインカンプ 3日目のlesson5。 昨日分からなかったところも質問してできたので、ようやく終わった。 lesson7 ターミナルコマンド 馴染みのないターミナル。 プログラミング初学者からすると、なんかよく分からなかった。 でも、でてきたものを試すだけだったので1時間くらいで終わった。 lesson8 Sass/Compass 今日の山場。 とにかくsass理解するのに苦労した。 手本通りやっても上手くいかないし。 質問したら、保存してなかったかららしい。 こま…
今日の学習 今日の学習時間は約3時間。 lesson5とlesson6を勉強した。 lesson5は昨日からの学習だが、またつまずいていまった。 そこで、いったん頭を冷やすためにlesson6を先に終わらせた。 lesson5 ポートフォリオ:デザインカンプ 昨日に引き続きの学習。 昨日途中にしていたところは一通り終わらせ、細かい修正をしていた。 だが、ここでまたつまずいてしまった。 画像の細かいサイズ変更がなかなかできなくて、頭がクラクラした。 そこで、初めてSlackで質問してみた。 速く的確な解答をいただいた。 評判通りの対応で頭がスカッとした。 用があり修正はできなかったので、また明日…
テックアカデミーWebデザインコース day2 初Photoshop
今日の学習 今日から実際に手を動かしての学習に入る。 今日の勉強時間は6時間。 Lesson4とLesson5を勉強した。 主にCacooとPhotoshopを使った。 Lesson4 デザインツール ここではCacooとPhotoshopの使い方を学んだ。 Cacooを使ってワイヤーフレームを作った。 Photoshopは基礎的な使い方を勉強した。 初めてのPhotoshop。 使い方をマスターすればインスタの投稿とかにも使えそうかも。 画像の不要カ所を塗りつぶすことができるのが感動した。 このツールだけでもだいぶ世界が変わった。 Lesson5 ポートフォリオ:デザインカンプ ここではPh…
テックアカデミーWebデザインコース day1 受講スタート
https://www.yaegac.com/entry/techacademy ついにテックアカデミーWebデザインコースを受講することになったキンナ。 期間は8週間。 料金は学割139000円から無料体験割で-5000円の134000円+税。 コースの最終目標はオリジナルサイトを作ることだ。 見に付くスキルは以下の通り。 ・Webデザインの原則 ・ワイヤーフレーム ・Photoshop ・HTML.CSS ・Sass ・Javascript ・GitHub オンラインだとモチベが続かないかもって思っていたけど、メンター制度が充実しているらしく、受講を決めた。 週2回のメンタリングと質問し放…
Webデザインを勉強したく、いろんなスクールの説明会に参加中のキンナ。 今日はテックアカデミーの無料体験に付いてくるメンタリングを受けてみた。 テックアカデミーを受講すると週2回メンターとのメンタリングが受けられるらしいが、その体験として無料でメンタリングしてもらった。 率直な感想 テックアカデミーや学習について、疑問に思っていることを全部聞けたし、納得したからそれは良かった。 しかし、こちらが聞いたこと以外何も話さなくて、なんか塩対応だなぁって印象。 コースの概要とか改めて説明されるのかと思っていたが、ホームページを見てくださいって… 対面で話す意味なくない?笑 まぁでも疑問が解消したからそ…
原宿表参道のおススメ美容室の体験談。メンズ3大美容室以外をご紹介。Hairsalon BREEN Tokyoはサービス、技術、雰囲気、料金、どれをとっても神レベルな美容室。美容室探しで迷われている方は必見。
初めまして。私はキンナである。 大学3年、文系、男。 もう少しで就職活動が本格化する。 その私の就活の記録としてブログを立ち上げる。 ブログを始めるわけ 私が目指しているのはWebデザイナー。 ただ、スキルが何もなく、これから勉強しようと考えている。 就活解禁まで4か月。うち1月にテストだから事実3か月。 勉強しようと決断するのにあまりにも遅すぎた。 もっと早く勉強してれば余裕ある行動ができたのかもしれない。 ただ、過去には戻れない。 限られた時間でコミットして勉強するか、休学や専門に進学するか。 しかし休学や専門には進みたくない。 周りがバリバリ働いたり遊んだりしているなか、一人黙々と勉強。…
「ブログリーダー」を活用して、kinnaさんをフォローしませんか?