沿革

  • ＞
  • History

はじめに

このポートフォリオサイトのデザインについて

  • ポートフォリオというより、リソース重視のECサイト（インテリア・雑貨）風のデザインに
  • 英語と日本語で別フォント（セリフ体）指定で、「size-adjust」でx-heightを調整
  • “Intersection Observer API”利用で目次同期する
  • 「@container scroll-state()」クエリーを使用したセクションを作る
  • Fluent Designの採用

以上を目的として作成

ヘッダー

  • HTML
  • CSS
  • JavaScript

ヘッダー①

  • iosのSafariにはホバーの概念がない

    iosのSafariでホバーアニメーションが効かなかった。iosのSafariにはホバーの概念が存在しないとの事。ホバー時と同じ挙動を行うように「input」を設置したが、チェックアウト時に収納しなかった。

    結果、スタイルを分けた

    @media (hover:hover) {
    "ホバーの概念がある場合に適用されるcss"
    }
    @media (hover:none) {
    "ホバーの概念がない場合に適用されるcss"
    }

  • 「label」に高さが指定できない

    ついでにタッチポイント領域の修正しようと思ったが、「label」はデフォルトでは「height」が指定できないらしく、「label」が入っている要素と入っていない要素で高さが揃わなかった。一度別要素を入れ子にして「display: block;」で高さを揃える必要があった。

ヘッダー②

リンクが増えてきことにより、ビューポート幅428px以下でハンバーガー表示に切り替える必要が出てきた。

「Works」の挙動にて”input”を利用している経緯もあり、今回はJavaScript（Jquery）で制御する方法で落ち着いた。

ロゴについて

  • illustrator

ロゴ①

前回のポートフォリオ作成時の内の一つで、タイポグラフィ・アートで「arai」を表現しました

ロゴ②

もう一つは前回ロゴとして採用したが、もったいないのでフッターに過去のポートフォリオへのリンクとした

ファビコン

favicon

新しく作るのもアレなんで無難に

"パンくず"の追加

  • HTML

今更追加。差別化する為に「HOME」はアイコンにした

FIrefoxで見出しが滲む

  • CSS

Firefox用に以下を設定

-moz-osx-font-smoothing: grayscale;

スキルセクション

  • CSS

新しいCSSコンテナスクロール状態クエリ「@container scroll-state()」を使用して「スキル」セクションのデモを作ってみた。

@container scroll-state(snapped) {
"centerにスナップされた時に発火"
}

※ WindowsおよびmacOS では、Chrome133以降で対応しています。また、Windows環境ではEdge133以降が対応ブラウザです。一部Androidでは動作しますが、iOS/iPadOSは非対応です。

目次の同期

  • JavaScript
  • UI/UX

“Intersection Observer API”利用で目次を同期する

要素位置を検知して目次に同期できる“Intersection Observer API”なる便利なものがあったので、スクロールで要素の位置を検知して、追従設定した目次に同期させた

const options = {
　　root: null,
　　rootMargin: "-50% 0px",
　　threshold: 0
};
const observer =
new IntersectionObserver(doWhenIntersect,options);
const target = document.querySelector('.target'); observer.observe(target);

デザインについて

表示コンテンツに合わせてテキストの色が変わるだけでは、指標を認識できない可能性を考慮しテキストの左に目印が付くデザインにしました。

Fluent Design

  • HTML
  • CSS

Windows「Fluent Design」

  • 今回サイト全体のコンセプトとしてWindowsの「Fluent Design」を採用した
  • 「box-shadow:」のエレベーションと一部マテリアルに"Acrylic(アクリル)"を再現。HIGでいう"グラスモーフィズム"に近いらしい

ページの追加

  • HTML
  • CSS
  • JavaScript

実績詳細ページ①

const url = window.location.hash;

実績一覧ページのリンクにハッシュを付けて、そのハッシュタグによって分岐させて該当する画像を差し込む仕様とした。

その他ページ

その他ページを追加。"実績一覧"に載せきれなかた分やそれ以前までに作成した成果物（仕事・個人）を掲載しています。

実績詳細ページ②

コラボPC用フライヤー（DTP）用に詳細ページを追加。

const swiperMain = new Swiper( ".mainSwiper" , { 　　spaceBetween: 0 ,
　　navigation: {
　　　　nextEl: ".main-next" ,
　　　　prevEl: ".main-prev" ,
　　} ,
　　thumbs: {
　　　　swiper: swiperThumb ,
　　} ,
　　pagination: {
　　　　el: '.swiper-pagination' ,
　　} ,
});

画像のスライダーに「swiper」を使用。デザインは「⚪︎ルカリ」風にしました。