DETAIL
NR GLYPHS PORTFOLIOページ
自分のイラストのためのポートフォリオサイトです。このページの目的は、サイト訪問者にイラストなどの創作活動を知ってもらうのと、SNSなどのリンク先への導線づくりのために作成しました。
デザイン解説
セクション毎に白とベージュにベースカラーを分けています。掲載するイラストの色が濃いため、サイト自体はトーンを抑えた淡い色で統一しています。それぞれのイラストのサムネイル画像にマウスオーバーすると虫眼鏡のマークが現れて、クリックするとモーダル画面でイラストの詳細を見ることができます。
技術スタック
SPAに見せかけた１ページのWebサイトです。LPとも言えるかもしれません。モーダル画面はあらかじめ全てページ中に埋め込んだものをクリックをトリガーに表示しており、画像が増えるとページが重くなってしまうため、 そのうち別の技術スタックでページを改修しようと思っています。
レスポンシブにするためにBootstrap3を使用しました。
レスポンシブ対応：ブレイクポイント 1200px、960px、768px
- HTML,CSS,JavaScript,JQuery,Bootstrap3を使用
- 掲載しているイラストは全て自分で作成
- デザインカンプは特に作成せず直でサイトを作りました。ベースに無料のテンプレートを使用しています。