コーディング模擬演習 − 建築事務所のWebサイトを作ろう

実務に向けた練習の一環として、実際に存在するWebサイトのデザインデータを見ながらコーディングのおさらいやさらなるスキルアップをしてみましょう。

これまでの学習でHTMLとCSSの基礎、そしてFlexboxやGridによるレイアウト、背景画像の扱い方を学んできました。今回は、それらを組み合わせて「本物に近い」Webページを再現することに挑戦します。Figmaのデザインデータを確認しながら、一つひとつ丁寧に進めていきましょう。

目次開く閉じる

今回のお題：アーキウェルワークス
サイト全体の設計を確認しよう
ヘッダー
メインビジュアル
セクション見出しのパターン
Newsセクション
Conceptセクション
Worksセクション
About Usセクション
Blogセクション
リンクパネル（Renovation / Flow・FAQ）
CTAセクション
フッター

今回のお題：アーキウェルワークス

今回コーディングするのは、一級建築士事務所「アーキウェルワークス」のトップページです。落ち着いたダークカラーを基調にした、高級感のあるデザインです。（画像クリックで全体表示）

Figmaの共有データを閲覧する

Figmaのデザインデータをダウンロード

Figmaのデザインデータを読み取って作る方がやりやすい方はデザインデータをダウンロードしてご自身のFigmaに読み込ませても大丈夫です！

この模擬演習には、これまでに学んだ技術がたくさん詰まっています。

Flexbox → ヘッダー・About Us・CTAのレイアウト
CSS Grid → ニュース・ワークス・ブログの一覧
positionを使った絶対配置 → 大きい装飾テキストの配置

日本語の縦書きのような初めて登場するプロパティもありますが、そちらは解説を入れますのでご参照ください。

練習課題のOFFICE CREAより複雑なレイアウトも含まれており難しく見えますが、よく見ると横並びと縦並びの組み合わせで作られていたりと、覚えたことを使いながら取り組めるような内容になっています。

サイト全体の設計を確認しよう

コーディングを始める前に、サイト全体で共通して使われる設定を確認します。

カラーパレット

役割	カラーコード
メインカラー（黒）	`#1a1d24`
ホワイト	`#fcfdff`
薄グレー（背景）	`#f1f3f7`
サブカラー（濃いグレー）	`#3f444d`
アクセント（赤）	`#9e2420`

カラーを扱うにあたり気を付けることとして、白や黒に見える色も真っ白（#ffffff）や真っ黒（#000000）ではないという点です。必ずデザインデータから確認するようにしましょう！

フォント

欧文には Crimson Text、和文には Zen Old Mincho（源ノ明朝）を使います。どちらもGoogle Fontsから読み込みます。

コンテンツ幅の考え方

このサイトでは、セクションの背景は画面幅いっぱい（width: 100%）に広がりつつ、コンテンツは width: 1024px で中央に収めています。

.news-section {
  width: 100%;
  padding: 128px 0;
}

.content-width {
  width: 1024px;
  margin: 0 auto;
}

section に固定幅をつけると横スクロールが発生します。必ず内側の div に幅を指定しましょう。

セクションの上下の余白は128pxをベースとしていますが、ところどころ違う部分もありますのでFigmaで距離を確認しながら実装していきましょう。

ヘッダー

ヘッダーは左にロゴ・右にナビゲーションが並ぶ、よくある構成です。

Flexboxの justify-content: space-between で両端に配置し、ナビのリンクは gap で等間隔に並べましょう。高さは128pxで背景色は #1a1d24 です。

メインビジュアル

背景画像は書き出したものを使います。background-size: cover と background-position: center でメインビジュアルの箱全体を覆うように表示します。

縦書きのキャッチコピー：writing-mode

縦書きには、今回初登場の writing-mode プロパティを使いましょう。日本語のWebサイトでは縦書きのデザインもたまに登場しますので使い方

.mainvisual-copy {
  writing-mode: vertical-rl;
}

セクション見出しのパターン

News・About Us・Blogには共通の見出しパターンがあります。装飾画像・英語タイトル・日本語サブタイトルの3点セットです。

Flexboxで横並びにして、テキスト2行は縦に積みましょう。英語タイトルと日本語タイトルでフォントの種類やサイズが違う点をFigmaで確認してください。

Newsセクション

カード3枚を横に並べるレイアウトです。Grid の grid-template-columns で3列均等に配置するのがおすすめです。

各カードは、サムネイル画像 → 日付＋カテゴリ → タイトルの縦積みです。日付とカテゴリの横並びにはFlexboxを使いましょう。

「View More」リンクは下線に border-bottom を引いてあるテキストリンクです。実装方法はいくつかあるので、工夫して右に寄せてみましょう！

Conceptセクション

写真がいろいろと並んでおり実装が難しそうなセクションですが、分解して考えてみると学んだことの組み合わせで作ることのできる箇所になっています。

上部に横長写真＋キャッチコピー、下部に左右2カラムが並ぶ構成です。下部は左に縦長写真、右に正方形写真・本文・ボタンを配置します。

左右の配置で align-items: flex-end を使うと左の写真の下端と右のコンテンツの下端が揃います。右側コンテンツは flex-direction: column で縦積みにしてください。

「View More」ボタンは border: 1px solid で四方を囲んだ枠線スタイルです。Newsの下線リンクと区別して実装しましょう。

装飾テキスト「Concept」について

背景に薄く大きく「Concept」という文字が入っています。

これは絶対配置 position: absolute を使って通常のレイアウトの流れから外して配置します。

.concept-section {
  position: relative;
  overflow: hidden;
}

.concept-deco-text {
  position: absolute;
  top: 64px;
  font-size: 164px;
  color: rgba(35, 37, 40, 0.05);
  white-space: nowrap;
}

position: absolute にした要素は、 position: relative な親要素の大きさを基準に配置されます。

今回はコンセプトセクション<section>要素に対してposition: relativeを設定します。このときoverflow: hiddenというおまじないを一緒にいれてみてください。

他のコンテンツよりも「背面」に置きたいので、並び順をz-index で調整しましょう。Worksセクションにも同じ要領で「Works」の装飾テキストが入ります。