HTML 5

CSS 3/SASS

jQuery

PHP

Portfolio

ブランドおよびウェブサイトデザイン、開発

自分のポートフォリオは、過去と現在の仕事を紹介するためにコンテンツを強調して設計と構築を行いました。下記の記事では、 BEM や OOCSS、SASS 用 SMACSS を使用してウェブサイトのスタイルを管理するために用いるワークフローについて、詳しく説明しています。

in_browser
01
コンセプト

話題になるようなコンテンツにする

クリエイティブ産業で仕事をする人なら誰もが、プロフェッショナルなポートフォリオを必要とします。私にとっては、WebデザインとWeb開発、という自分のやっている仕事を実際のメディアで見ていただくいい機会だと思っています。自分のポートフォリオを構築するにあたっての主な目標は、即座に印象を形成したいと願う潜在的雇用主の仕事をやりやすくしてあげられるような、シンプルなデザインを作ることでした。

ポートフォリオのサイト自体が背景に溶け込み、自分が見せたいと思う仕事のフレームの役割を果たす必要があります。したがって、これはほとんどのウェブサイトで一概に言えることですが、コンテンツが王様でなくてはなりません。さらに、画面のサイズやブラウザに関わらず、美しい画像と文章が見やすくなくてはなりません。

02
Design

ビジュアルの簡潔さ

色を選ぶにあたっては、コンテンツを専念に見てもらえるよう、ウェブサイトに大きなコントラストを与えてくれるような色を選びました。

img-project-center

ウェブサイトのカラーパレット。

同サイトの全ページが同じレイアウト原則に従っています。ページは2つのセクションに分かれており、片側には追加の情報、もう片側にはそのページの中心となる情報が含まれています。繰り返しを避けるため、別のページではこの原則を少なくします。

例として、ホームページは2つの部分に分かれており、中心となるコンテンツは色のコントラストを用いて強調されています。連絡先のページでは、焦点は面積比の差を利用して作られています。中心となるコンテンツは追加情報よりも大きくなっているのです。

このデザインチョイスにより、簡潔ながらよく整理された、コンテンツが強調されるようなページを構築することができるとともに、ウェブサイト開発の際によりモジュラーなアプローチも可能になるのです。

img-project-center

ユーザーとの対話の例:コンタクトフォーム。

03
デベロップメント

モジュラーなアプローチ

ウェブデザイナーの観点からみてコンテンツが王様だとすると、ウェブ開発者にとってはスピードが王様だ、という人もいると思います。残念なことに、CSS はこの領域で見過ごされがちです。フロントエンドの開発者の多くが JavaScript のパフォーマンスに主に焦点を当てているからです。

自分の CSS 開発プロセスを向上させるために、このプロジェクトでは、スタイリングに異なったアプローチをとってみることにしました。モジュラー HTML と CSS を書くのに、最もよく使われる方法の幾つかを使ってみたのです。BEM (Block、Element、Modifier )方式、OOCSS (Object oriented CSS )方式、そして SMACS ( Block、Element、Modifier) 方式です。これらの手法を SCSS とあわせて使ってみました。

BEM

BEM方式は、モジュラリティがすべて、という手法です。ページの各要素で1度以上使われたものはモジュールになる可能性があります。ある要素がモジュールになるには、その構造とスタイルが以下のような特定のやり方で作られている必要があります:

  • モジュールがページ上をレイアウトを壊すことなくどこにでも移動することができるよう、コンテナはモジュールそのものから分かれている必要がある。
  • クラス名はその要素の機能を反映するものでなくてはならない。さらに、BEMの命名規則に従っていなくてはならない。

                    <nav class="wrapper__lang--left">
                      <ul class="lang">
                        <li>
                        <a class="lang__label">
                          <span class="lang__icon icon-cross-small"></span>
                          <span class="lang__selected"></span>
                        </a>
                          <ul class="lang__dropdown">
                          <li class="lang__dropdown--items" ><a href="">fr</a></li>
                          <li class="lang__dropdown--items" ><a href="">en</a></li>
                          <li class="lang__dropdown--items" ><a href="">jp</a></li>
                          </ul>
                        </li>
                      </ul>
                    </nav>
                  

wrapper__lang--left という名前のコンテナが規則を定義し、モジュール Lang のページ内における位置づけを行います。異なったコンテキストに使うことができるよう、モジュールそのものとは別々にスタイル設定されています。モジュールの lang 要素はその機能に従って命名され、その前には二重アンダースコア __dropdown がついています。要素の修飾子にはダブルダッシュの印が付き、その ––items がそれに続きます。

その後 SCSS を使って、モジュールのスタイルはただ lang という名の、モジュールHTMLストラクチャに従って整理される SCSS ファイルに格納されます。


                   .lang {
                         position:relative;
                         z-index: 4;
                         width:27px;
                         height:41px;
                         margin: 0 auto;
                         cursor:pointer;

                             @include e(label) {
                               @extend %lang__label;
                               z-index: 2;
                               border: 3px solid $black;
                               span{font-family: $font-family--primary--regular;}
                              }

                             @include e(icon) {
                               @include absolute(top -6px left 4px);
                               @extend %lang-span;
                               width: 13px;
                               opacity: 0;
                            }

                            @include e(selected) {
                              @include transform(rotate(45deg));
                              display: block;
                              margin-left: 3px;
                              font-size: 13px;
                              line-height: 21px;
                              text-align: center;
                              @include m(projects){color:$white;}
                            }

                            @include e(dropdown) {
                              @include center-axis(x);
                              @include absolute(top -25px);
                              display: none;
                              padding: 40px 11px 9px;
                              background-color:$black;

                              @include m(items) {
                                position:relative;
                                width:50px;
                                height: 33px;
                                margin-bottom: 5px;
                                margin-top: 5px;
                                text-align:center;
                          }
                  }
                }
                

その要素に影響を与える JavaScript コードもすべて、lang という名のファイルにまとめられます。したがってモジュールは内蔵型で、レイアウトやコードを壊さずに追加や削除、修正が楽にできますので、より適応性やスケーラビリティに優れメンテナンスしやすいコードが可能になります。

OOCSS

オブジェクトベースのコーディング方式がどれもそうであるように、OOCSSの目的はコードの再使用を促すことであり、最終的には、より速く効率的で追加やメンテナンスの楽なスタイルシートとなることです。

OOCSSは1つの主原則に基いています。スキンとストラクチャの分割です。スタイル化されたウェブページ上のほとんどすべての要素が異なった視覚的な特徴(「スキン」)を持っており、これが異なったコンテキストで繰り返されます。例えば色や文章のスタイルです。これらの特徴がクラスに分離されていくと、再使用が可能になり、どんな要素にも適用できるようになり、しかも基本的な結果は同じになるのです。私が自分のポートフォリオを開発している際には、この原則を色彩やボタン、ヘッドラインといった数多くの要素に取り入れました。

これらのスタイルすべてが「para(パラ)」クラスの中に含まれています。「パラ」はそれ自体がモジュールであり、異なったフォントサイズのすべてがこのモジュールの1つの要素として格納されており、特定のサイズのカラーバリエーションは修飾子として格納されています。一般的なスタイルは再使用可能な1つの「スキン」の中に合わせ入れられ、不必要に繰り返されるものは何もありません。私がやればよいことはただ「スキン」を適用するだけです。



                 .para {

                 @include e(large) {

                     @include m(dark) {
                       @extend %para;
                       color: $gray;
                       @include trailer(1);
                    }

                    @include m(light) {
                      @extend %para;
                      color: $blue--x-light;
                      @include trailer(1);
                    }
                }


                @include e(meduim) {

                    @include m(dark) {
                      @extend %para-medium;
                      color: $gray;
                      @include trailer(1);
                    }

                    @include m(light) {
                      @extend %para-medium;
                      color: $blue--x-light;
                      @include trailer(1);
                     }
                  @extend %para-medium;
                }


                @include e(xsmall) {

                    @include m(dark) {
                      @extend %para-xsmall;
                      color: $gray;
                      @include trailer(1);
                      text-shadow: 1px 1px $black;
                    }

                    @include m(light) {
                      @extend %para-xsmall;
                      color: $blue--light;
                      @include trailer(1);
                      text-shadow: 1px 1px $black;
                    }
                    @extend %para-small;
                }

                

これらのスタイルすべてが「para(パラ)」クラスの中に含まれています。「パラ」はそれ自体がモジュールであり、異なったフォントサイズのすべてがこのモジュールの1つの要素として格納されており、特定のサイズのカラーバリエーションは修飾子として格納されています。一般的なスタイルは再使用可能な1つの「スキン」の中に合わせ入れられ、不必要に繰り返されるものは何もありません。私がやればよいことはただ「スキン」を適用するだけです。例えば、クラス para__large--dark をすべての要素に適用します。結果は同じになります。

SMACSS

SMACSS のまさに中核となるのは、CSS 規則をカテゴライズする方法です。このプロジェクトでは6種のカテゴリーを使用しました:

  • Base
  • Layout
  • Elements
  • Module
  • Settings
  • State
  • Vendors

このカテゴリー化の目的は、デザインの内部で繰り返しの多いパターンを特定することです。つまり繰り返しを制限すれば、コード数も減るし、メンテナンスも楽になるし、ユーザーエクスペリエンスの一貫性もより大きくなるということです。私のワークフローには Grunt.js が備わっており、SCSS プリプロセッシングや画像、SVG オプティマイゼーションといった自動タスクを提供してくれました。また JavaScript ファイルを整理し最適化するために、require.JS も使いました。

結論

このプロジェクトのお蔭で、OOCSS や SMACSS、BEM といった原則を利用してモジュラリティについて探究することができました。また SCSS の長所を利用して、より整理されたスタイルシートを作成することができました。CSS スタイリングへのこの新たなアプローチは、今後も特に大型のプロジェクトで役に立つことになると思います。