# ポートフォリオデザイン相談

## 2023/5/30 デザインフィードバック
確認遅くなりました！！！！
Win11/chrome, Android13/chromeで確認済です。

* 全体的に大きな問題は感じませんでした！今の職場のエンジニアさんにコーディングとかしてもらった時、デザインの再現がずいぶん雑で私が手直しする案件がちょいちょいあったからふつーに感動

* ソート機能やタグはまだ実装前かな？まぁその辺は必要に応じて…

* 細かいけど、フッターのデザインがちょっと想定と違うかな
* Twitterとgithubのアイコンは、当初のデザインで出した背景ナシのやつの方が収まりいいかも。もし今のやつにするなら、もうちょいアイコンの間に隙間設けた方がいいかな。クリック領域が近すぎるので
* SPのフッターはセンタリングの想定だったけど、まぁこれは左寄せでもありかも（どっちでもいい）

* 背景のグラデーションのアニメーションもまだ実装してないのかな？と思ったけど、これもあってもなくてもいいかなと思った。この手のブログというかメディアで背景があんまり動きすぎるとうざいしね

* 記事詳細のページのhタグ、もう少し`margin-top`の数値増やした方が、コンテンツの区切りがわかりやすくなって可読性上がるかも。例えば、`h2`タグは今`margin-top:24px`だと思うんだけど、実際のデザインデータ上では実は40pxなんですよね～（もしかしてうまく開発プレビューに反映されてないか？）
他のhタグも、10～20pxくらい`margin-top`増やした方がバランス良いかも

* スマホ版の記事詳細のデザインが、ちょっとデザインデータと違うかも！まぁこれはこれでありかなーとか思ってるけど、一行あたりの文字数がちょっと短く感じなくもないので、、、このデザインでいくなら、記事内の文字サイズ1段階小さくしてもいいかもしれない

* ライトモードも確認しました！概ね上記と同じなんだけど、`<a class="entry-card">`だけ、ちょっと`box-shadow`きつく感じたので色薄くした方がいいかな。
今`box-shadow:0 2px 12px rgba(0,0,0,.502);`だけど、`box-shadow:0 2px 12px rgba(0,0,0,.2);`くらいでいいかも。（トレンド的にはもっと淡くしていいんだけど、そうすると背景色も調整しないと変になるし、そこまでやるとめんどいので保留ｗ）

## 11/13 修正内容について

長文でLINEだとクッソ見づらくなりそうだったため、こちらに記載します。
大変お待たせしました、修正一通り対応してみましたのでご確認ください！

### PCデザインの修正
PCブログ アニメーション確認用：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/

PCブログ 挙動の確認用：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/screen/eaf6506a-16d4-4dc2-b323-8b9748799167

PCポートフォリオ：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/screen/74efcafb-1247-40c5-8aeb-537f42951505

【備考】
* 追加要素に伴い、そこそこ前回から変わっています
* ブログ：タグ選択のポップアップ作りました
* ポートフォリオ：Worksの詳細ページ作りました
* 角丸のデザインは、ボタン部分を覗いて`border-radius: 10px;`で統一しているのですが、データのいじりかたを誤ってしまい結構な箇所の角丸デザインが崩れちゃってます……。（残り工数的に）直せるかちょっと怪しいような予感がしているので、今のうちに共有というかメモしておきます。
* そのほか細かいところは、XD上のコメントで説明しています

### SPデザインについて
全体的なデザインは概ね前回でOKをいただけたため、スマホのデザインも展開しました。

SPブログ アニメーション確認用：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/screen/15216cd1-2fdf-44c1-a781-0296ba99635e

SPブログ 挙動の確認用：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/screen/54879375-b3d7-4336-b385-f1b2f43e1a6a

SPポートフォリオ：
https://xd.adobe.com/view/52029b16-713b-4078-91de-db9fd77aab6b-0751/screen/c30d02d9-559a-4172-b8aa-114219c7b2b5

【備考】
* 工数削減のため、PCと比べて挙動の再現を省略しています。hoverの動きなどは基本PCと同じです。（スマホの場合はhoverじゃなくてactiveか…）
* 初回の打ち合わせで「できるだけPCとSPのフォントサイズの比率は揃える」というお話を踏まえて極力頑張りましたが、バランスがどうしても変で、比率を無視して調整してしまったところが結構…いやかなり多いです。大変申し訳ない。。。基本的には4px刻みで頑張っていますが、しっくりこないところはその刻み方も変更しているところが一部ございます。。。
* w390px * h800px基準で作成しています（iPhone13のサイズがこれくらいらしい）。w360px ～ 420pxで変に崩れなければまぁいいんじゃないかなって考えています
* そのほか細かいところは、XD上のコメントで説明しています

### 今後の対応について
申し訳ないのですが、残り時間の工数が残り8時間くらいになってます。（後でLINEで稼働状況お送りします）
大幅な修正や追加ページはおそらく厳しいですが、軽度であれば修正対応いくつかできると思うのでご相談ください！

### （追記）過去デザインのデータ共有します
https://drive.google.com/file/d/1njsnztb5UH1KY5Dlu9h41dD5fLIGzPzT/view?usp=sharing
無課金ユーザー故JPGでしか吐き出せなかった……
修正前のデザインのキャプチャを上記に保存したので、比較したい場合お使いください。

### （追記）対応漏れメモ
#### ブログ
* 記事詳細のシェアボタン、下部に配置してない

## 10/15 お打ち合わせ

### 契約書について

- [契約書雛形](https://www.dropbox.com/s/088liqf7a1x6cwa/%E6%A5%AD%E5%8B%99%E5%A7%94%E8%A8%97%E5%9F%BA%E6%9C%AC%E5%A5%91%E7%B4%84%E6%9B%B8_%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88.pdf?dl=0)
- 金額は個別の発注書に書きます
- CloudSign だと助かります
- 契約書/発注書送付先のメールアドレスください

## 10/02 受領分について
https://hackmd.io/dFdcrhz-S2KBCAtKB9cgYQ#
※10/10 21:38 追記

(背景のアニメーション箇所以外で)使用している色の一覧が欲しいです！
濃淡レベルで 100, 200, 300... となっていくイメージだと助かります(9段階ないものとか間抜けとかは全然ありそう)
参考: https://tailwindcss.com/docs/customizing-colors

#### 全体感想

- めちゃくちゃ好みのデザインに仕上がっていて最高です！！！ありがとうございます！！！
- 「記事が並んでいる印象は避けたい」というのは「ただデザイン秩序なく並べられただけにしたくない」「まとまりがなく散らばって見えるのは避けたい」程度の意図だったので、頂いたデザインでバッチリです！！！
- 差し色(できればアイコンっぽいパステル)を入れたいというのも、単に暗いだけだと寂しいというところだったので、アニメーションのご提案がまさに要望にフィットしました！
- ポートフォリオトップのアニメーションがまさに望んでいたもので最高です！！！
- これがやりたかったけどうまく言葉にできなかったので、形にしていただいて感無量

### 確認・追加要望

かなりアイデアレベルでざっくり書いてしまっていますが、負担が高いので難しいとかは言っていただいて大丈夫です！(実装上の難易度は無視して OK です)
以下に対する可否や今後の進め方についてはどこかでお打ち合わせしたいです

#### 01. ブログ背景のアニメーションについて

- 色の位置はアイコンの配置と関連しますか？
- 完全ランダム or ある程度法則性/偏りがあるか
- ==A. 特に意図はないので実装都合にお任せします==
- 訪問者の PC スペックに応じて、アニメーションをオフにして閲覧を優先しても良いですか？
- オフにする場合、単一色の静止画では寂しいので、アニメーションの 1 シーンをキャプチャしたものを静的画像として背景に設定するなど想定しています
- ==A. 特に問題ないです。ただ、CSSのanimation(keyframe)で行ける想定なので、そんな重くならない気がします==
- ==A. CSSのアニメーションの遷移は、XDのプロトタイプのものよりもっとなだらかなイメージです。実装時に調整していただければ～==

#### 02. ブログのサイドバーについて

- タグ検索は別ページではなくページ遷移なくメイン領域内で絞り込みとかではどうでしょうか？
- 複数選択可能にしたいため
- 今なにのタグで見ているか、はタグボタンを active な色にするとか想定しました
- ので上の表記(7/10 の `Tag: 院試`)は無くてもいいかなと思ったんですがどうですかね
- ==A. ページ遷移なしでポップアップで選ばせるUIはできそう（ただ実装重くなりそう、優先度低め）==
- アニメーションの検討の必要はありそうですが、ふんわり画面再描画みたいなやつでどうでしょうか
- ==A. 多分できると思う==
- タグだけだと本文の縦幅に対して情報量が少なくないかと思ったんですがどうでしょう
- 最近の記事、みたいな項目を載せるなど
- タグが少ないとタグ一覧表示が映えないので場合によっては隠すなど
- ==A. サムネありのおすすめ記事（3～5記事）領域を設ける、タグ一覧はいったん削除、TOPへ戻るボタンを追加==
- 本文スクロールに追従する想定ですか？
- その場合 vh に応じて表示項目を省略することもありえる
- 縦幅狭い環境で見たときにサイドバー内スクロールが発生するのを防ぐため
- そんな環境で見るなよ！とは思うものの手癖悪い人もこの業界いるので
- 変な環境のときはサイドバー隠すとかの対処でも良い
- ==A. 問題ないです。==

#### 03. ブログの Read More について

- 上記タグの絞り込みの都合上、不自然がないように表示したいです
- Read More ではなく初期表示ページに全部入れるのって、重い以外に何か避けたほうが良い理由ってありますか？
- 重い問題自体は技術的に解消可能のため
- 内部的には段階的にレンダリングする形にはなる
- ので End キーとか押されたときの挙動は力技になります
- Read More ではなく画面インで追加部分表示(擬似的な無限スクロール？)にするなどで対処したいのですが、何か良いアイデアないでしょうか
- ==A. このケースの場合はread moreで問題ないと思います。昇順・降順切り替えの機能を追加してみます。==

#### 04. ブログの本文ページについて

- 本文スクロール時にヘッダは追従する想定ですか？
- 追従しない派の気持ちです
- 追従しない場合、サイドバーにトップへの導線を置きたい(トップに戻るのに上までスクロールしないといけないので)
- ==A. 上記の通り。ヘッダーは追従しない/TOPへ戻るボタン実装します==
- どこかにソーシャルボタンを置きたい
- 上の方がいい(読む前に共有できるため)
- が、タグと場所奪い合いになりそう……
- ==A. 記事のシェアボタンを実装、記事の上下両方に設置。種類はTwitter/はてぶ/リンクコピー機能==

- ↓みたいなのはのっぺりしてる感じがあるので、シュッとしたい

- 本文文字サイズ気持ち大きくしたい気がする……？
- h2 比で小さく見える気がする
- h2 を小さくするのでもアリ
- 使っても h4 まで
- markup 上は h4 だけど表示としては font-weight: 600 にしているだけとかもありえる
- ==A. 下記参照==
- line-height があれば違うのだろうか(よく分かっていない)
- ==A. ごめんなさいフォントの指定がちょっとミスってました。直します。あとline-heightを再考してみます==
- h3 下にアンダーラインってありですかね
- 有無どちらが良いかわからない
- h4まで使うのであればデザイン再考します。h4まで使うならh3はアンダーラインあった方がいいかも
- ul/li の部分が詰まって見えそうな気がする
- li のトップレベルだけ line-height 上げるとかってどうなんですかね？
- トップレベルのやつだけとりあえず流し見してもらった上で、気になるところだけ li を読んでもらいたいという視線誘導をしたい
- ==A. デザインし直しますのでお待ちください。階層ごとにmarginで区別つけた方が一般的だと思います==
- ソースコードのハイライトはライブラリ次第になりそうなので実装着手後に判明しそうです
- よっぽど合わないのは避けたいつもり
- 背景色レベルで合わせるためにテーマを作るのもありです
- 既存のもののベースカラーだけブログと揃えて暖色はそのまま使うとかでも OK
- 何色用意すればよいかわからないので、全部色指定するのは負担高そう(想像)
- ==A. 良さげなライブラリ使ってください！==
- XD の web で margin とか font-size とか見る方法ってありますかね？
- そのあたり厳密指定なければ、一度こちらで実装して(4 or 8 の倍数 px をベースを想定)、崩れに対してレビュー頂くとかのほうがいいですかね
- ==A. 解決済み==

#### 05. ポートフォリオのイニシャルビューについて

- アニメーション前後で主要文字の場所って変わった方がいいですか？
- 場所替えず、 About Me とかのリンクを少ししたにふわっと表示させるとかだとどうなんでしょう
- ==A. 追加しました。ただライティングのセンスによって影響度がやばそうなので頑張ってください==
#### 06. About Me について

- 左のマークの色はアイコンの 3 色そのままでなさそうに見えるんですが、そのままだと映えないとかですかね？
- ==A. 仰る通りです。==
- 各項目が ▶ だとクリックで下に開きそうな気がしてしまうんですが僕だけでしょうか
- ==A. 直します。アコーディオンにする必要なないかと考えてます==
- すっきり書ききれないので開けるようにしたい……という要望が先にあるのかもしれない
- 開く場合に縦が 1080p を超えちゃうので開けない方がいい気もする……
- もしかして 100vh に収まらなくても良かったりする？
- ==A. 収まらなくていい（というか環境によっては無理ゲーかなと思います）==

#### 07. Works について

- サムネ無いことが多そうなのでサムネ無しをデフォにはしたいんですが、コメントの通りなのでモノによってはサムネ入れたいんですが、混在ってありですかね
- ないものの比率のほうが気持ち多めくらいになりそう
- 全部入れるとなると当たり障りのない記号的なものを入れることになりそうな懸念
- それの選定でサイトデザインを損なうのが怖いので、画像以外なら入れたくないな……という
- ==A. 検討します！==
- タイルっぽくアイテムが並んでる中に広告入ってるっぽく見えちゃう……？
- 最近ありがちな気がするけどバッドパターン？
- ==A. これは心配しなくておｋ==
- Works の詳細表示はページそのまま開く想定か、ポップアップか、別ページか
- 実装都合はどれでも OK ですが、それぞれに URL をもたせたいので、直接来訪された場合はスクロール位置を下げてから開くアニメーションを入れることになりそう
- ==A. 別ページに遷移する形で対応します==
- Works の Read More 相当ってある想定ですか？
- 全部ここに載せて数が増えても下に伸びるだけだから問題ない？
- これが一番無難かと思っているがご意見欲しいです
- Read More で Works だけ並んでいる別ページになっても OK
- ブログと同様追加読み込みボタンでの無限スクロールは避けたい
- ==A. read more実装する、最初は一番見せたい実績を出して、そうでもないやつをread moreで区切る==

#### 08. Contacts の有無について

- Twitter 載せてるからそこに連絡してねスタンスで何も書かないで良いですかね(全くわからん)
- Contacts にどういうコンテンツを一般的に載せるのかわからないので想像がつかないため
- 作ったとしても殺風景になるからナシにしてるとかですかね
- ==A. Contact領域としてfooter作る、SNSアイコンにする==

### ご相談

#### 01. 権利どうしましょう

[権利まわり](#権利まわり)

#### 02. ブログを複数建てたい(テーマ別)ときに、アクセントカラー替えで出すとか難しいですかね

- テックのブログ、私生活のブログは分けたい(その他も出るかも)
- 背景以外でぱっと見て違うものだと判別できるような箇所の差し色って難しそうですかね……
- が、全く同じ色のブログだと混乱を招きそうなのでどうだろうという
- レイアウト全く同じで基本色だけライトテーマにするとか……？
- ポートフォリオ、テック系はフォーマルなのでシックにダークテーマに締める一方、私生活等のカジュアルな方面はライトテーマで雰囲気の違いを再現……とかどうだろうと思いました
- ダークテーマは背景にグラデーション？入ってアニメーションとか入れる方向で決まっても、ライトテーマの方はそういうのなくシンプルで良いかと思っています
- ==A. ライトテーマでもいいし、ダークテーマで使ってる色を少し変えるでもありだし、グラデーションの色を変えるのもあり==

---

## 2021/09/11 頭出し

- ブログ


### 全体
・デザインは統一
~~・色は淡い感じ（Twitterアイコンと同じ色）~~
ダークテーマっぽい感じ / VScodeっぽい配色 / 黄色やオレンジ系の色は避けたい（赤・青・緑系にしたい）
・納品データはXD、コーディング以降はゆーたさん
・有料素材は要検討
・PCデザイン優先
・PCとSPの文字の大きさは、比率は同じにしてほしい（コーディングの都合上）
　ただ、バランスが変になる場合はその限りではない

### ブログ
・シンプル目
・FV的なものはいらないが、記事が何個もあるのはちょっとイメージと違う
・サイドメニューもあるといい
・ハンバーガーメニューはいらない

### ポートフォリオサイト
・FVがほしい（参考：https://www.unsweets.net/）
・シンプル目
・この情報を最初（FVの下）に載せる：https://github.com/euxn23/euxn23
・実績のとこはサムネなし
・ちょっとLPっぽい感じ

### 工数や経費について
・週1、数時間稼働
・5000円/hで計算
・納品後に請求書と稼働時間をお送りします！
・リテイク含めて40h以内でおさめたい　打合せ 1.5hくらい

### 参考資料

https://github.com/aerohub/hugo-identity-theme

https://github.com/euxn23/euxn23

https://www.unsweets.net/

https://redux.js.org/

https://backlight.dev/

https://material-ui.com/customization/color/#playground

https://ver1000000.com/

https://takanorip.com/ <- これすき

https://potato4d.me/

https://kanameliser.net/

---

## 権利まわり

- デザイン実績としてして頂くのは全く問題ないのですが、運用していくにあたり手を加えることの是非も踏まえどうするのが良いでしょう
- 具体的に変更が入る余地がありそうな箇所...
- 背景アニメーション、色味バランス
- 技術不足でアニメーション実装がデザインと同じになるか不安というのもある
- 工数都合上、初期はアニメーション省いて後々追加ということもありえる
- レタリング
- というか、文字を置く箇所をもう 1 つ増やしたい(のせたい情報が増えたとか)とかがありそう
- アイコンが変わったとか、イラストのぶち抜き立ち絵を入れたいとか
- 発注形態の立て付けにも関連しそう
- デザインそのまま納品してもらったのにそのあといじるのはおかしい、とかも出てきそうなので
- デザイン提案～コンサルティング、みたいな形の発注だと不都合ありますか？
- そちらの都合に合わせます！
- サイトのどこかにデザイン提供者として書くのが通例でしょうか？
- 書いてほしい/書かないでほしいあれば希望優先します！
- ==A. 可能であれば、フッターに書かせていただけるととても嬉しいです！！！上記と一緒に対応します==
- 変更をしたい度に監修という名目で発注すれば、そちらの事後コンサルティング(共創？)とかで実績で追従できるようにできますかね
- 勝手に変更して元のデザイン意図が壊れると悲しいので、都合問題なければお願いしたいです
- 副収入限度額的に来年とかだとお互い助かりそう……？
- 変更したいたび相談(コンサルティング？)として都度発注でよいですかね
- このあたりのフローや契約について一度納品したものの先方がデザインいじりたいケースの実例や経験に沿った方法があれば、それベースにご相談させてください
- そちらのご都合に合わせます！
- ==A. 仰る通りコンサルティングという形になると思います。納品後にご相談ください！==