DETAIL
NR GLYPHS WORK The Pieces Made
このサイトは自分がこれまでに制作した架空のサービスのデモサイトや、デザインワークなどの作品を紹介しているWebサイトです。このページは、デザインやWebフロントエンドの仕事用のポートフォリオにすることを目的としています。
デザイン解説
ベースの白を基調としてポイントカラーとしてオリーブグリーンを使用しています。ヘッダー部では、アイテムを分類ごとに閲覧できるように、タブで表示を切り替えています。初期値はALLで全てのアイテムが表示されます。
トップページの各アイテムの画像から、それぞれの詳細ページで説明文とデモサイトへのリンクを確認できます。
また、デザインのコンセプトは各作品を「パズルのピース」と見立ててデザイン作りをしています。
フッター部には、サイト自体の解説と、仕事用のスキルやコンタクト方法、別サイトを紹介するページへのリンクがあります。
技術スタック
トップページから二階層目の詳細ページに遷移する多ページのWebサイトです。ページトップへボタンは一階層目と二階層目で共通のJavaScriptを使用しています。
また、ヘッダー部のタブ切り替えもJavaScriptを使用しています。
シンプルにHTML,CSS,JavaScriptで作成しましたが、ページ切り替えやページパーツの読み込みなどの効率化を図りたいため、別の技術スタックを使用してページを改修する予定です。
レスポンシブ対応：ブレイクポイント 1370px 922px 764px
- HTML,CSS,JavaScriptを使用
- 掲載コンテンツは自分の作成したもの
- 画像加工にIllustrator、Photoshop、デザインカンプ作成にFigmaを使用