サイトを見る 自然素材ファッション コーポレートサイト 使用言語 HTML SCSS JavaScript React デザインツール Figma 概要 自然素材を用いたファッション雑貨用品の企業サイトの構築を行いました。実装にあたりAIを補助的に活用し、時間短縮に努めました。ヘッダー・フッターにはReactを用い、共通パーツとして再利用しやすい構成としました。 実装面ポイント ・配色や余白のコード重複を防ぐため、変数の利用やFLOCSS・BEMの設計法を取り入れ、修正・追加を行う際にも分かりやすい構成を意識しました。 ・スクロールやホバーに応じてラインやボーダーが動くアニメーション、メインスライダーをJavaScriptおよびSCSSで実装しています。 ・これまで制作会社で培った実装経験をベースに、AIを補助的に活用しながら、 作業効率と品質のバランスを意識して制作しました。 デザイン面ポイント ・自然素材の繊細さや手仕事の印象が伝わるよう、細い線が流れるように現れるアニメーションを特徴としたデザインを数箇所に取り入れました。 ・ベージュ系の配色を使うことで落ち着いた雰囲気と、明朝系フォントで統一することで丁寧さが伝わるようなイメージを心がけました。
サイトを見る 建築事務所 コーポレートサイト 使用言語・ツール WordPress HTML SCSS JavaScript PHP デザインツール Figma 概要 WordPressのブロックテーマを用いて制作したサイトです。 theme.json によるデザインルール管理とカスタム投稿タイプの導入を行っています。 Figmaでデザイン制作し、写真を主役にした余白設計を意識しています。 実装面ポイント ・ブロックテーマの特性を活かし、編集画面上でも構造が把握しやすいよう、ブロック構成や階層を整理して設計しました。 ・theme.json ではカラーや余白などのデザインルールを定義し、テーマ全体で統一感が保たれるよう設計しています。 ・建築実例として追加しやすいようにカスタム投稿タイプを導入し、管理しやすい構成としています。 補助的にAI利用も行っています。 デザイン面ポイント ・情報を詰め込みすぎず、写真を主役にしたレイアウトと余白のバランスを活かすことで、モダンで洗練された建築事務所の空気感が伝わるデザインを目指しました。 ・配色はモノトーンで静かな雰囲気と、アクセントとしてネイビーを入れることで引き締まった印象を意図しました。
サイトを見る シェアオフィス サービス紹介LP 使用言語・ツール tailwind HTML SCSS JavaScript デザインツール Figma 概要 長野市にあるシェアオフィスを想定した紹介LPを制作しました。 写真を主役にした構成と余白設計により、落ち着いた空気感と 「暮らすように働く」というコンセプトが伝わることを意識しています。 PC / SP 両方での体験を重視し、レスポンシブ対応を行いました。 実装面ポイント ・本LPでは CSSフレームワークのTailwind CSSを採用し、余白・配色・文字サイズなどのスタイルを ユーティリティクラスで管理することで、実装スピードと作業効率の向上を重視しました。 ・Tailwind CSSではデザイン調整やレスポンシブ対応もhtmlへのクラス記述のみで完結できるため、短時間での作業が可能となっています。 デザイン面ポイント • Tailwind CSSは、あらかじめ用意されたCSSクラスをHTMLに当てていく手法のため、 シンプルな構成のページを短時間で作成するのに向いている点を意識しました。 • その特性を活かすため、複雑な装飾は避け、 必要な情報や画像に絞ったシンプルなデザインとすることで、 デザインと実装を行き来する無駄を減らし、制作効率を高めています。
