クリップボードにコピーされました

サイト

#web
  • ポートフォリオサイト
  • これから沢山作りたいです。

ポートフォリオサイト

  •  サイト概要#about

    ● WEBデザイナーになるためのポートフォリオ。(このサイト)

    ● https://meio-portfolio.com

  •  ターゲット#target

    ● 採用担当者の方々

  •  課題#task

    ● 自分を表現できるもの、作品がない。    

    ● 文章だけでは伝わりにくいものを補うため。

  •  目的#purpose

    ● 就職活動において書類通過を目指す。

    ● 採用担当者の方に自分の可能性を見てもらう。

  •  ペルソナ#persona

  •  サイトマップ#persona

  •  イメージボード#persona

  •  ワイヤーフレーム#persona

    ● 初期案

    ● 修正完成版(準備中・掲載予定)

  •  デザインカンプ#persona

    ● 初期案

    ● 修正完成版(準備中・掲載予定)

  •  使用ツール#tool

    ● Photoshop : 画像編集、デザインカンプ

    ● Illustrator : イラストの作成

    ● Figma : ワイヤーフレーム、デザインカンプ(レスポンシブ)

    ● ChatGPT : jsなどの不得意な分野の相談(文章は全て自分の言葉で書いています)

    ● Scapple : 構造設計、サイトマップ

    ● Sublime Text : コーディング

  •  制作時間#time

    ● (試行錯誤→挫折→やり直しを決意)×2:2週間   

    ● 企画・情報設計:1週間

    ● デザイン:2週間

    ● コーディング:2週間

  •  確認した機器#device

    ● ノートパソコン(Windows):Lenovo

    ● ノートパソコン(Windows):LG

    ● ノートパソコン(MacOs):MacBook Pro 14inch

    ● タブレット(android):Galaxy Tab S7 FE

    ● スマホ(android):Galaxy A52s

    ● スマホ(iOS):iphone 15 pro

  •  確認したブラウザ#device

    ● Google chrome

    ● safari

    ● Microsoft Edge

    ● Opera

    ● Mozilla Firefox

  •  学び・振り返り#reflection

    ● まず、私はweb制作が好きだということに気づいた。やっていてとても楽しい。今まであちこちに散らばっていた自分の能力がやっとひとつに収納された気がする。

    ● CSSやjsを分かっているつもりでデザインカンプまで作ってしまい、とてもコードで表現しにくいデザインをしてしまった。やりながら一つ一つ修正を繰り返した。今ならワイヤーフレームやデザインカンプを作るとき、コーディングまで考えて作成できる。今後自分の引き出しを増やすためにもCSSやjsを学び続けようと思った。

    ● 私が何よりも一番重要視したのは「読んでいただくサイトにすること」である。色も最低限にし、視覚的な要素、刺激的な要素を少なくした。「芸術をするのではない。ブランディングをするんだ!」と何度も自分に言い聞かせた。

  •  note(詳しくはこちら) #note

設計

デザイン

Memories