見出し画像

Webサイト制作ガイドライン共有化構想[#00]

Webサイト制作のガイドラインを全国で共有しませんか?

ヒカルデザインのヒカルです。
今回、Webサイト制作ガイドラインの全国共有化への働きかけを決意表明したいと思います。

僕ひとりでも最後までやりきりたいと思いますが、みなさんの知見やアドバイス、そして同じ思いを持つ有志の方に読んで頂ければ幸いです。

1.共有ガイドラインのメリット

Webサイト制作のガイドラインを全国で共有した場合、みなさんが享受できるメリットを挙げます。

・学習コストが下がる
・断片的な情報を探す手間が省ける
・外部発注のハードルが下がる
・成果物の品質が一定になる
・無駄な作業時間が減る
・クリエイティブに集中できる

ガイドラインを共有する一番のメリットは、無駄な作業時間を減らしてクリエイティブに集中できることだと思います。
PHPのフレームワークと同じ思想で、同一の設計で構わないものはプラグイン化して、必要なことへリソースを利用します。

2.なぜ共有ガイドラインは無いのか

共有ガイドラインがあれば便利なのは明白なのに、なぜ共有されたWebサイト制作のガイドラインは無いのでしょう?僕が想像するに自己解決能力の高さがあると感じています。

・社外向けに作るメリットが少ない
・Web2.0

・自己解決能力が高い

Web2.0により個人が情報を発信することで、部分的な解決策が断片的にネット上に存在しています。
それらの情報を参照することで、自己解決能力が高くなっていることが、共有ガイドラインが無くても制作を行える原因だと思います。
情報共有してくれる方にはとても感謝していますが、共有ガイドラインに準拠したものが作られると、より導入と保守が行いやすくなると思いませんか?

3.共有ガイドラインとは

僕が現在考えているガイドラインは、制作フローを基準としたガイドラインと、それに準拠したテンプレート群です。

[コーポレートサイト受託制作の場合]
・お見積
・ヒアリング
・コンセプトワーク
・企画
・スケジュール
・原稿/素材作成
・プロトタイプ
ここから
・デザインカンプ
・制作環境構築
・コーディング
・CMS組込
・公開前確認/公開作業

・保守

ここまで↑
・ご請求
・運用

まだ細かな方向は定めていませんが、基礎部分は拡張性を高く設計して、機能や表示をブロック単位でカスタムできるイメージです。

4.共有ガイドラインの例:デザインカンプ

デザインカンプのガイドラインとファイルの例を挙げます。
※使用するアプリケーションはPhotoshopを前提にしています。

[デザインカンプ作成:ガイドライン]
1)透過画像について
 ・透過画像は[合成モード]を利用せず[不透明度]で調整する。
 ・アセットで書き出す為、範囲全体にオブジェクトを配置する。
[デザインカンプ作成:テンプレート]
1)LP
 ・PC用テンプレート[1920px ✕ 6000px]
 ・SP用テンプレート[750px ✕ 6000px]

デザインカンプからの書き出しルールなども用意することで、デザイナー側で画像の準備も行えるかも知れません(コーディング時にPhotoshopを利用しなくて済みます)。

5.共有ガイドラインの例:CMS組込

CMS組込のガイドラインとファイルの例を挙げます。※使用するCMSはWordPressを前提にしています。

[CMS組込:ガイドライン]
1)メインループ:クエリの書き換え
 ・クエリの書き換えには[pre_get_posts]を利用する。
 ※[query_posts]はクエリを書き換えサイト全体に影響を及ぼす為非推奨
[CMS組込:テンプレート]
1)コーポレートサイト用テーマ
 ・デフォルトテーマ
2)メディアサイト用テーマ
 ・デフォルトテーマ

非推奨になったテンプレートタグや関数をアップデートすることで、最適な状況を保ちます。

6.共有ガイドラインのアイディア

僕が考えているガイドラインやテンプレートを、箇条書きで記載します。

[ガイドライン]
・Photoshopのレイヤー構造と色分け
・命名規則(画像名/クラス名/スラッグ名)
・コーディング規則
・CSS設計(SMACSSなど)
・ブレイクポイントの位置
・クロスブラウザの種類
[テンプレート]
・jQuery一式(スライダー/バーガーメニュー/タブ/telリンクなど)
・Sass(SCSS)のmixin
・CSSアニメーション一式
・WordPressの基本プラグイン一覧

7.共有ガイドラインの利用者

共有ガイドラインは利用しやすいユーザーと、利用しにくいユーザーに分かれると思います。

[利用しやすいユーザー]
・フリーランスのWebサイト制作関係者
・ガイドラインを持たない制作会社
[利用しにくいユーザー]
・先進的なWebサイト制作が主な方
・独自のガイドラインがある制作会社

8.大事にしたい理念

共有ガイドラインを作る上で、僕の考える理念を記載します。

[クリエイティブに集中できる]
クロスブラウジングやバージョン管理、さまざまなバグへの対応に追われず、自由な発想でユーザーへ情報を届ける環境を作りたい。
[ボトムアップ]
必要なオペレーション技術のハードルは下げて、より多くの制作者が使える環境を作りたい。
例)GUIで利用できないアプリケーションは使わない(CUIは訓練が必要)

9.超えるべきハードル

共有ガイドラインを[作るまで]と[作った後]には、以下のハードルがあると想定しています。

[作るまでのハードル]
・人手が必要(ひとりでもやります)
・有識者の知見が必要(ディレクター/デザイナー/エンジニア)
[作った後のハードル]
・多くの人に利用して貰う必要がある
・継続的なメンテナンスが必要

10.お願い

Webサイト制作の共有ガイドラインは僕ひとりでも作ろうと思います。
しかし、多くの方の意見を交えながら作らなければ、ただ新しいガイドラインが生まれただけで終わってしまいます。

それに、僕自身がマネジメントの経験もなく、この共有ガイドラインを運用する上でマネタイズが必要かどうかも分かりません。
もし、この働きかけに賛同いただける有志の方がいらっしゃれば、TwitterのDMでお声がけ頂けると幸いです。

11.最後に

ここまでお読み頂き、本当にありがとうございます。
Webサイト制作ガイドラインの全国共有が達成できれば、多くの関係者が必要なことに全力を尽くすことができると思います。

今後、この共有ガイドラインの概要をまとめたプレゼン資料を用意して、お話を聞いて頂ける方へ説明できる準備を進めたいと思います。

Twitterで拡散して頂くだけでも、一歩前に進む力となりますので、どうぞよろしくお願いします。

ありがとうございました!!

12.あとがき[きっかけ]

あとがきとして、ガイドラインの共有を行いたいと考えた3つのきっかけについてお話させて頂きます。

1.仕事量の増加と協業の必要性

僕はディレクターと協業してkanvasという屋号でWebサイトの受託制作を行っています。
ありがたいことに仕事の依頼が増えており、僕一人で制作作業の全てをまかなうのが難しくなりつつあります。
そして、kanvasではヒアリングやコンセプトワークに力を入れて、企業のブランディングをお手伝いしたいと力を入れています。
もし、共有されたガイドラインがあれば、外部パートナーと協業を行いながら、目指す方向へ走りやすくなります。

2.初学者向けのオンライン講座の開設準備

ヒカルデザインというYoutubeチャンネルを立ち上げ運営していたところ、Udemy講座の制作依頼をいただき、現在Webサイト制作の講座資料を作成しています。
その中で、大きく変更されていたHTML5の仕様や、そもそも知らなかったHTMLの要素や属性を発見して「やばいぞ!」と感じました。
これも、共有されたガイドラインがあれば、ガイドライン自体のバージョンを上げることで問題は解決できます。

3.グラフィックデザイナーとの出会い

2018年11月に大阪のクリエイターさん達が福岡で交流会を開いてくれたので、参加させていただきました。
そこで複数のグラフィックデザイナーさんと知り合い、その後は大阪や東京での交流会へも参加して、色々なお話を聞かせてもらったのですが、Webデザイナー(僕)に比べてグラフィックデザイナーはセルフブランディングによる差別化がうまいと感じました(個人的な見解です)。

例えば、名刺デザインを行う方でも[ストーリージェニックな名刺][ずるい名刺]など、正直なところクリエイティブでの敗北を感じました。

それに、イラストレーターやカメラマンなどのクリエイターと横の繋がりが多く、ストックフォトばかり使う僕とはクリエイティブの概念が違うことに、ちょっとだけ落ち込みました。

そして、そのクリエイティブの差の理由には[グラフィックデザインは歴史が長く規格が安定している]ことがあるのでは?と、個人的に感じています。
名刺のサイズは91mm×55mmという基準があり、小さくすることは可能でも大きくすると名刺ケースに入りません。紙の解像度は[現実]だけです。

ここは少し発想が飛躍していますが、もしWebデザインにも共有されたガイドラインがあれば[没入クロージングなランディングページ][聴くコーポレートサイト]を作り、セルフブランディングできるかも知れません。

サポート頂いたお金は交通費などの活動資金として、大切に使わせてもらいます^^