Trial and Error

制作会社への転職を目指すポートフォリオ!!意図は？何ができる？何日でできる？ 仕事のうえでの信頼を得るための自己紹介一番大事なのは、制作物とその制作過程を記載することかな？ 企業への就職なので、人柄のようなものも伝わると良いかな つまり、仕事ができそうな人/信頼できそうな人、ということが伝わるデザインを目指す！！ Home画面で、興味をもってもらえるようにしたいけど 他の部分はシンプルにする予定だから、写真を多めに、少し華やかにしよう gridを使ったレスポンシブなレイアウトにしよう Homeの次は、作品を載せ、自分について、連絡する、と続けると自分のポートフォリオの目的に一番合った順番かな？ Worksの部分は、サムネイルでだいたいどんな制作物なのかわかると思うから 作品のタイトルよりも、制作意図の方を大きく書いてみようどういう意図で作ったものなのかをよりアピールする あとは、問題解決に直結する少しオリジナリティのある要素を何か考えよう！ 忙しい方に見てもらいたい、、ということを考える内に、全体の何％閲覧したのかを表示させる仕組みを思いつく また、きれいに整えた文章だけよりも、とりとめのない考えをそのままのせると 未経験者の成長の経緯をみてもらうには、むしろ有効なのではないか? 前回サイトを作って、全幅のデザインにすると、派手さや見やすさはあったけどレスポンシブデザインを実現させるために作業が増えたし、 今回は、むしろ整然としたデザインを目指し、コントロールされつくした雰囲気を演出したい PC版のときの横幅は、レスポンシブも考えて、1024px幅で固定しよう余白多めに

仕事ができそう/信頼できそうな印象のデザインにするにはどうしたら良いんだろう...! 全体的にしっかりと管理されてる印象のデザインにしよう フォントは、読みやすくてきれいなフォントにしよう 見出しの英文はごく細めのFuturaに似たフォントできれいめにしたいな 制作物自体が目立つように基本はモノトーンにしよう Homeは淡いグラデーションカラーを入れよう穏やかさや落ち着いた印象の灰色がかった淡いグリーンと 光が刺すような、明るい気持ちを表現する、黄色味の白のグラデーション ダークモードは、ライトよりも少し高級感をテーマに 頭の中身、のページだけ、少し見せ方を変えて他のページとの役割の違いを知ってほしい ハンバーガーバーの位置について右上にあると思う、よくあるのですぐわかる けど、押しやすいのは、左下？と考えたので今回はその位置にしてみる 講師に講評してもらって、線幅が太くて目立っていたので、細めに!フォントの数が多かったので、絞ったり、修正！ スマホ版では、下部に固定のメニューがあるから、フッターは省略しよう。

計画を立てて、効率良く書こう！そのためには、どこが横並びか(flex)になるのかを考えると習った! HTMLを全て書いていくナビゲーション以外の固定部分は、mainタグの外？中？ scssを書いていくセクションごとに、レスポンシブデザインまで作っていく デザイン時には合った方が良いと思っていた、トップに戻るボタンnavが固定だから、不要かも！ 進めていく内に気になってしまって、あとから戻ってpaddingなどをclass名に追加すると 思わない部分のレイアウトが崩れることがあった。 事前に計画をたてて作成していたつもりだけど、まだまだ初めからグループ分けをしてレイアウトを進めることができそう。 アニメーションをどこにつけるか、つけないか、どのくらい動かすのか クリックできる部分には統一して同じようなアニメーションをつけると、 閲覧者が感覚的に動かせそう! だいぶ進んできたけど、今見たらヘッダー部分が固定なのでスクロールした時に 文字が被って見づらいから、影をつけよう！と、やっているとまた思いがけない表示崩れが 気が付かないまま、次に進んでいたけど、たまたまスマホサイズのメニューを開いたら不要な影が！！ やっぱり、最初の計画から漏れがあって、コードが長くなってから後から付け足していくと、 把握しきれなくて、思わないミスがあるので、だんだん無くしていきたい！ 全体的に左揃えの中に中心揃えの部分がでてくると気持ち悪いな！！ my mind部分は、押せる部分でも無いし、他のページとは違って整った文章になっていないのを見せたいから、 横からスライドインする動きにしたいな。 darkモードにしたときに、画像自体も若干暗くした方が良いかな？

今までと違って、サーバー上でページを作っていける仕組みになる...! 固定ページと、投稿ページがあるんだな phpの書き方も勉強しないと まず何をする？ singleとarchiveというファイルを使うのか htmlでタグで囲んでいた具体的な文章部分に差し替えてphpのコードを入れたら、wordpress上でテキストを編集できるようになった！ 少しずつわかってきた？ ずっと、worksとworkという投稿ページを作ってしまっていて 要素を入れる場所が間違っていた...! 一覧と一覧の中身と詳細ページのコードを書く場所がよくわかっていなかったみたい 作品ページ、できてきたけど、好きな順番に並び替えられるのかな？ 頭の中のページ、SCSS上で最後のカードにのみ違う見え方にする指示を書いていて 最初、その通りにしようと どのようにしたら最後のカードを取得させられるのか一生懸命考えていた よく考えたら、最後のカードのフィールドをつくれば良いだけだった...！ 今ある機能を自分で考えて上手に使いこなさないと、と実感 スマホ版で、表示崩れ 不要なコメントアウト部分がちらっと見えてしまっている？ 固定の%表示部分が、sectionの上に入ってしまう表示崩れ 原因１.wordpress化したときに新しく .archiveというセクションを挟んでいた。 原因2.クラスを付随して見え方を変えることを複数同じ場所に指示していたので、優先度が低くなってしまっていた。 バナーの見せ方、スマホのモックアップに入れこんでみようかな どんなときにバナーが現れるかもう一度考えてみよう コンタクトフォームを作る 何についての記入欄が必要かな？ あまりシンプルすぎると何を書いて良いのか取っ掛かりが無いという意見がネット上にあがっていた とりあえず必要最低限の内容 もう少し考えたい お問い合わせがうまく送信できたらサンクスページを表示させよう swiper.jsというサイトを教えてもらった！ これから活用していきたい 一生懸命、頭の中ページのprevious/nextボタンのリンクの取得コードを書こうとしていた けど、それはサイトの中で迷子になるかも なので、頭の中ページには、作品一覧を少しみせて、もどるボタンと作品自体にもどるボタンを設置することに! ACFのテキストフィールドを使えば、class名のつけ外しができることに気がついた！ 閲覧%の部分、100%に近づくと色がついたら面白いし、目がいくかな 前職のポートフォリオをダウンロードできる仕組みをつくろう コンタクトフォーム、モーダルでも良いのではないかというアドバイスをもらった フォームの形がhtmlそのままで可愛くなかった 参考をたくさんみて、なんとか納得いくように！ 入力中や入力し終わると枠線の色や太さが変わるように変更 なんとか形ができた！ 必須項目は入力していないと送信できない仕組みにしよう エラーメッセージもわかりやすく フォームのバリデーションは、html、php、Javascript全部適用して頑強にしてみよう！ ダウンロード用パスワード入力部分も可愛くないし、使用しない人には邪魔になっているから アコーディオンにして きちんと送信ボタンをつける！ 一度公開！したけど、お問い合わせフォームにローディング画面がないと自分でも送信できたのかどうかわからずに、なんども送信ボタンを押してしまった ローディング画面を作成 次はチャットボットを作ってみる！ AIエディタを使ってみる プロンプトを入力したらかなり惜しいところまで作成できた！ けど、まず自身が何をするのかわかっていないからプロンプトも詰めきれていなかったよう まずAPI取得でかなりつまづいて チャンキングという作業にまで漕ぎ着けた！ 考え方として、RAGの仕組みで情報源を自分のサイトの中のみに絞って Gemini APIで回答してもらうという仕組みを理解した！ wordpress上ではなく、phpに直接書き込んでいたテキストを、情報取得の仕組みの部分に直接書き込んでいたけど、今後編集したりできるように、隠し投稿ページをつくって、そこから抽出する仕組みへと変更することにした！ geminiの提案ではなくて自分で気がつけてよかった！ つぎは、回答が長い場合にその一番したまで自動的にスクロールされているのでユーザーが自分でスクロールして戻る作業が生まれてしまっているのでこれを修正する 全部できたみたい！サーバーにあげて微調整 チャットボットをせっかく作ったのに、SP版のときに常には画面にアイコンが無い見え方にしていた どうせなら、目につくように修正しよう！ Google search consoleに登録してみた iphoneのsafariでみると崩れる！ 微調整していく