LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@y-t0910(あお)

デザインからコードへの落とし込み

Posted at

デザインからコードへの落とし込み

重要なのは、デザイナーが作成したデザイン案をどのように実装（コーディング）するかです。実際にデザインソフト（FigmaやAdobe XDなど）からコーディングへと移行するときのポイントをまとめてみました。

1. デザインガイドラインの把握

デザイナーが決定した色、フォント、レイアウトなどの要素をしっかり共有しましょう。最終的なデザインとコーディングの整合性を保つために重要なステップです。

2. ブレイクダウン（分解）

デザインカンプを見ながら、セクションごとにどのようなHTMLタグやコンポーネントが必要になるかを検討し、細かいパーツに落とし込んでいきます。フレームワークを使う場合は、どのような構造で組み立てるかも合わせて考えましょう。

3. コーディング準備

画像素材やアイコン、フォントの収集: 必要なアセットをまとめる

コンポーネント化の計画: ヘッダーやフッター、セクションなどをコンポーネントとして分割する

命名規則の確認: BEMやフレームワークに合わせたクラス名など、プロジェクトで定められたルールを確認

4. レスポンシブデザインの実装

スマホ、タブレット、PCなど様々な画面サイズに対応するため、各ブレイクポイントでのデザインを考慮しながらコーディングを進めます。メディアクエリやフレームワークのグリッドシステムを活用することで、効率的に対応可能です。

5. UIコンポーネントの動き（アニメーション等）

デザインカンプだけではわかりづらい動きの部分を、エンジニアとデザイナーで共有することが重要です。ホバーエフェクトやアニメーション、要素の切り替えなどは、コーディング前に仕様を詰めておくとスムーズです。

6. テストとフィードバック

ある程度コーディングが完了したらデザイナーや他のメンバーとチェックを行います。実際の端末やブラウザで表示崩れや動きに問題がないか確認し、修正を重ねましょう。

実際のコーディング例（HTML & CSS）

以下は、シンプルなWebページのレイアウトをデザインから実装へと落とし込むサンプルです。ヘッダー・メインセクション・フッターの構成で、レスポンシブにも配慮した設計をイメージしています。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サンプルページ</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="site-header">
      <nav class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main class="container">
      <section class="hero">
        <h1>サイトタイトル</h1>
        <p>ここにサイトの説明文を入れます。デザインに合わせてサイズや色、レイアウトを調整しましょう。</p>
        <button class="cta">詳しく見る</button>
      </section>
    </main>

    <footer class="site-footer">
      <p>© 2025 MyWebsite</p>
    </footer>
  </body>
</html>

/* styles.css */
/* リセットCSSなどがある場合はここにインポートする */

body {
  margin: 0;
  font-family: sans-serif;
}

.site-header {
  background-color: #003366;
  padding: 1rem;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.hero {
  text-align: center;
  margin: 2rem 0;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta {
  padding: 0.75rem 1.5rem;
  background-color: #003366;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
}

.site-footer {
  background-color: #f0f0f0;
  text-align: center;
  padding: 1rem;
}

/* メディアクエリでレスポンシブ対応 */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

上記の例では、デザインカンプで定義されている配色や要素の配置イメージに合わせて、HTMLとCSSを記述しています。コンポーネント化を意識する場合は、ヘッダーやヒーローセクションなどを更に細分化したファイルに分けても良いでしょう。

実際のコーディング例（React）

フロントエンド開発でよく利用されるReactを使った実装例です。デザインカンプをもとに、各パーツをコンポーネントとして分割して管理することで、保守性が高まります。以下は単一コンポーネントにまとめたサンプルです。

// App.jsx
import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <header className="site-header">
        <nav className="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <main className="container">
        <section className="hero">
          <h1>サイトタイトル</h1>
          <p>ここにサイトの説明文を入れます。デザインに合わせてサイズや色、レイアウトを調整しましょう。</p>
          <button className="cta">詳しく見る</button>
        </section>
      </main>

      <footer className="site-footer">
        <p>© 2025 MyWebsite</p>
      </footer>
    </div>
  );
}

export default App;

以下は、HTML＆CSSの例と同様のスタイルを適用したApp.cssの例です。

/* App.css */

body {
  margin: 0;
  font-family: sans-serif;
}

.site-header {
  background-color: #003366;
  padding: 1rem;
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.nav a {
  color: #ffffff;
  text-decoration: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.hero {
  text-align: center;
  margin: 2rem 0;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta {
  padding: 0.75rem 1.5rem;
  background-color: #003366;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
}

.site-footer {
  background-color: #f0f0f0;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

ポイント

Reactではコンポーネントごとにファイルを分割して管理できます。例: Header.jsx, Footer.jsx, Hero.jsxなど

グローバルなスタイリングだけでなく、Styled ComponentsやCSS Modulesを使うとスコープが限定されたスタイリングが可能

デザインカンプから色やフォントを抜き出し、App.cssや各コンポーネントのスタイルに反映させる

このように、HTML・CSSの基本構造は同じでも、Reactコンポーネントとして分割することで再利用性やメンテナンス性を向上させることができます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?