<h2 id="h69bcc6cbbc">Nuxt.js</h2><p>Nuxt3を採用した。<br>普段はReact.jsやNext.jsの利用頻度が高く、Vue.jsの書き方が全くわからなくなっていたため、今回は良いトライになった。<br></p><h2 id="hb570a6676d">デザイン</h2><p>アイコンは単語カードを連想してデザインした。記載内容によっては暗記が難しい部分もあると思うが、「この記事に書いたかも？」と引っ張りだせるといいかなと思う。<br></p><h2 id="h22da5dfa28">スモールスタートとスクラップアンドビルドで</h2><p>完璧になるまで出さないこと、慎重になりすぎることがこれまでの自分だったと思うが、美術大学の卒業制作を経て意識が少し変わったように思う。<br>小さく初めて、改善を重ねていきたい。<br>今はリンク集的なサイトになっているが、今後は自分の解釈も入れていきたい。<br></p><h2 id="hcf2b66e679">コード</h2><p><a href="https://github.com/hippopotacos/dev-cards/tree/master/nuxt-app" target="_blank" rel="noopener noreferrer">GitHubのリポジトリ</a></p>

dev-cards.net

<h2 id="hac59267a64">情報整理・配置</h2><p>情報の優先順位を考えて設計。<br><br>これまでの経験・これから何をしていきたいかを明記し、人となりが見えるように簡単なプロフィールも記載した。<br><br>作品については、当時どのようなことを考えて制作したかを振り返って記載するようにした。</p><h2 id="ha9be234f9c">色彩計画</h2><p>自分の性格は診断テストの結果によると「<a href="https://www.16personalities.com/ja/infp%E5%9E%8B%E3%81%AE%E6%80%A7%E6%A0%BC" target="_blank" rel="noopener noreferrer">仲介者</a>」で、「落ち着きがあり控えめで、内気にさえも見られますが、内には激情と情熱があり、まさに光を放つ可能性を秘めている」とのことだった。<br><br>概ね当たっているような気がするため、落ち着きを与えながら光を放つようなグリーンを、暗めの背景とあわせて表現した。</p><h2 id="hc085827fb1">アクセシビリティ対応</h2><p><a href="https://smarthr.design/accessibility/check-list/" target="_blank" rel="noopener noreferrer">ウェブアクセシビリティ簡易テスト（SmartHR Design System）</a>に沿って確認。<br><br>また、下記のようにWebアクセシビリティ実装チェックリストを作成しながら、<br>Web Content Accessibility Guideline (WCAG)のガイドラインを詳細に確認している。<br><br><a href="https://www.kazunorimatsunaga.com/document/a11y-guideline.pdf" target="_blank" rel="noopener noreferrer">a11yチェックリスト(PDF)</a><br><br>上記について、<a href="https://a11y-i-guideline.netlify.app/" target="_blank" rel="noopener noreferrer">https://a11y-i-guideline.netlify.app/</a>でチェックリストを作成。<br>※ただしWCAG2.1未対応のため、差分を確認する必要あり<br><br>少しずつポートフォリオを改善していきたいと思う。</p><h2 id="hfbbd473f74">Storybookの導入</h2><p>だれかと共同作業するときに特に役に立つと思うが、Webサイトを拡張する際にどんなコンポーネントがあるか把握できて便利かも？と思い導入。<br><br><img src="https://images.microcms-assets.io/assets/85dddc9f3fcb4c1c8ff6f00619fd599e/7c93b97005d540018025ccffb5dfa2f2/storybook.png?w=2560&amp;h=1920" alt="Storybookのキャプチャ"></p><h2 id="h89e7b98e09">詳細</h2><p>Next.jsにおけるコンポーネント設計・CSS設計にまだ最適解が見出せていないので模索中。<br><br><a href="https://github.com/hippopotacos/portfolio-2022/tree/main/my-portfolio" target="_blank" rel="noopener noreferrer">GitHubのリポジトリ</a></p>

ポートフォリオについて

<h2 id="hb0eaa0fe88">テーマ：教育に関する Web コンテンツ</h2><p>テーマの選定は、これまでの行動を振り返り、どういう表現をしていきたいかを考えるきっかけとなった。<br><br>教育を選択したのは、通信制大学の環境に刺激を受けたためである。<br>学生の居住地はバラバラで、地域格差を埋めるインターネットの素晴らしさを改めて痛感した。<br><br>そして、自分より年上の人たちが学習と向き合っている姿を見て「みんなこれからもずっと学習していくんだ」と感じ、学習をサポートする貢献がしたいと思った。<br><br>そのように思ったのは、過去にアルバイトで塾講師として教育に携わっていたことも関係していると思う。<br>受験生の頃に、先生方が面白おかしい授業をしてくれて、学習の見立てを変えてくれた。<br>自分が先生方のようになれるとは思っていなかったが、自分なりのやり方で生徒の勉強への苦手意識を解き、「なぜやらなかったのか」という後悔をなくしたいと思っていた。<br><br>認知科学やユーザーインターフェースに興味があり、正社員としてWeb制作をするようになってからは教育分野から離れてしまったが、教育分野には技術で解決できる課題がいくつも潜在していると思う。こうして「教育に関する Web コンテンツ」に決定した。</p><h2 id="hc4b18b1e05"><strong>調査</strong></h2><p>小学校でのプログラミング教育の必修化・タブレット導入（GIGAスクール構想）についてはニュースで知っていたが、教育の現場が実際にどうなっているのかを把握する必要があった。<br>そのため、小学校教諭・小学生のお子さまをもつ親にアンケートを実施した。<br><br>すると、ICT 教育は実際に進んでいるものの、良いことばかりではなく問題が数多くあることがわかった。<br><br>小学校の先生はやることがたくさんあるのにもかかわらず、ICT教育の導入によって生じる新たな問題にも対処しなければならなくなっている。<br>そのため、現場外からのサポートが必要だと考えた。</p><h3 id="h7760c25f77"><strong>調査した内容</strong></h3><p>小学校教諭や小学生のお子さまを持つ親にインタビュー</p><ul><li>小学校1年生からタブレットが支給されているケースもあれば、4年生からの場合もあり、市によって状況は様々である</li><li>タブレットの持ち帰りや休み時間に使えるかどうかも市による</li><li>タブレット導入後の指導として、市の教育委員会が取扱に関するテキストを用意していない場合がある（いずれにせよWeb上で閲覧できるガイドのようなものない）</li><li>他人のアカウントになりすまして不正に操作するなどのトラブルも発生している(!)</li><li>ITリテラシーがないのは子どもだけでなく、親世代も同じで、親世代は特にITリテラシーの格差が激しい</li></ul><h3 id="h743ef90fd2"><strong>調査からわかった課題</strong></h3><ul><li>さまざまな業務によって先生の負担がただでさえ大きいのに、ICT教育導入による業務が追加されている状況</li><li>支給されたタブレットをうまく活用できていない学校もある</li><li>不正利用など、モラルの欠如</li><li>生徒はもちろん、親や先生もテクノロジーのプロフェッショナルとは限らない</li><li>問題が起きてから対応するので、予防ができていない</li></ul><p><br>以上のことから、教育の現場以外からのサポートが必要なのではないかと考えた。<br>学校で起きていること以外でも、SNS 利用で芸能人に対して誹謗中傷を行うなどの例から、インターネットに対するリテラシー不足を感じることがある。<br><br>そうしたリテラシー不足を補うための教材はないかと調べたところ、古くに作られたページが多く、それもテキストばかりで構成されている例が多い。 <br>そのため、読むのが苦痛にならず、楽しみながら知識をつけられることを目指し、「はじめてのインターネット」を作成した。</p><h2 id="h89e7b98e09">詳細</h2><p><a href="https://www.kazunorimatsunaga.com/document/guide-portfolio.pdf" target="_blank" rel="noopener noreferrer">ポートフォリオ(PDF)</a><br><br><a href="https://www.kazunorimatsunaga.com/document/guide-panel.pdf" target="_blank" rel="noopener noreferrer">展示用のパネル(PDF)</a></p><h2 id="h61d00f6a5e">展示会のようす</h2><p><img src="https://images.microcms-assets.io/assets/85dddc9f3fcb4c1c8ff6f00619fd599e/a08c3e590e4f439998ad87139772dc97/guide-exhibition.png?w=1200&amp;h=630" alt="卒業制作展で展示した時のようす"><br>2022.03.13 - 2022/3/20に学内で卒業制作展が行われた際の写真。<br><br><img src="https://images.microcms-assets.io/assets/85dddc9f3fcb4c1c8ff6f00619fd599e/69be76950bcd47d2ba23785d6c892204/guide-card.png?w=840&amp;h=630" alt="卒業制作展で配布したカード"><br>展示でTAKE FREEのカードを設置した。</p>

はじめてのインターネット

<h2 id="hd27f989ad2">進め方</h2><p>依頼主にデザインの明確なイメージがあったため、認識を合わせながら制作を進めた。<br>その際のプロトタイプ作成にはAdobe XDを利用した。<br>また、費用感と納期を考慮して、WordPressを採用するに至った。<br></p><h2 id="h264464b08e">ヘッダーのロゴ</h2><p>映像作品をみると、いくつかの作品で手書きの文字が利用されていたことから、<br>手書き風のフォントのReenie Beanieを利用して作成した。<br></p><h2 id="h71aea0fa83">レイアウト・配色</h2><p>作品の邪魔にならないような配色にし、余白を多くとることを意識して提案した。<br>現像後の写真に表示される、日付のオレンジ色をアクセントカラーとした。<br><br><img src="https://images.microcms-assets.io/assets/85dddc9f3fcb4c1c8ff6f00619fd599e/b725dc76d1454f35a904bbc3bfea8113/kentonakahara-film.png?w=2560&amp;h=1700" alt="Webサイトのキャプチャ"><br></p>

Kento Nakahara

<h2 id="hd27f989ad2">進め方</h2><p>依頼主がAdobe Illustratorで作成したデザインを素材としてコーディングした。<br>どのようなデータが欲しいかをこちらからもお伝えしながら制作を進めた。<br>運用時のサポートや予算などを考慮し、MovableType.netを導入するに至った。</p><h2 id="h922edff87b">実装</h2><p>デザインを再現することに重きをおいて実装した。<br>CSS設計思想の<a href="https://github.com/hiloki/flocss" target="_blank" rel="noopener noreferrer">FLOCSS</a>を取り入れ、CSSの拡張や保守をしやすくすることにも関心があった。</p><h2 id="h5d5fbcd19a">評価</h2><p>クオリティの高い公式サイトがあることで、印象や信頼度が上がり、ブランドの世界観も相手に伝わりやすい。<br>Webサイトを見てお仕事の依頼がくるとのことで、Webサイトを持つ意義、制作する意義を実感できた。<br><br><img src="https://images.microcms-assets.io/assets/85dddc9f3fcb4c1c8ff6f00619fd599e/6559d78f13da4665aa75fcdfd71b60a1/desicco-top.png?w=1280&amp;h=960" alt="Webサイトのキャプチャ"><br></p>

マツナガカズノリのポートフォリオサイト

Works

Profile

Type

Will

Experience

Education

Certification

Contact