トップ > 制作・開発 > Qrious的Web制作スタイル – マークアップ
制作・開発

Qrious的Web制作スタイル – マークアップ

Qrious的Web制作スタイル – マークアップ

こんにちは。マークアップのmikaです。

デザイナーのAkikoさんからバトンをもらって、今回はマークアップについてお話していきます(o^∀^o)

ご注意

Qrious内で、わたしがマークアップを担当した場合の進め方についてのお話です。進め方は、チームや担当者によってさまざまだと思いますので、ご参考までにお読みくださいね。

リレー記事一覧
  1. QriousのWeb制作スタイル – プロデュース(3つ前)
  2. QriousのWeb制作スタイル – ディレクション(2つ前)
  3. QriousのWeb制作スタイル – デザイン(1つ前)
  4. QriousのWeb制作スタイル – マークアップ(イマココ)
    1. QriousのWeb制作スタイル – プログラミング(これから)
      QriousのWeb制作スタイル – まとめ(これから)

マークアップとは

“マークを付けること。プレーンテキストにタグと呼ばれるで囲まれたマークを付加することによって、書体や修飾などの情報を表現している。インターネットのWebページで使われているHTMLはマークアップ言語。”

ASCII デジタル用語辞典では、こう説明されています。HTMLは「Hyper Text Markup Language」の略で、ほら、マークアップって入ってるでしょ( ∩ˇωˇ∩)

デザイナーと別けて“コーダー”と呼ばれることもありますけど、コーディングをする人、コードを書く人の総称がコーダーで、JSを書く人も、PHPを書く人も、RubyやPythonを書く人も、広い意味でのコーダーになります。

ちなみにQriousの場合、完全分業制でJSやPHPなどのプログラミングやシステム開発を主に担当する“フロントエンドエンジニア”が別に居ますので、フロントエンドと役割分担をしてコーディング作業をしています。

マークアップの役割

クライアントさんの要望をディレクターがWebの形(ワイヤーフレーム)にし、デザイナーがデザインして絵(PSDなど)の形にします。それを、文字(HTMLやCSS)に落とすのがマークアップのお仕事です。

まず、ワイヤーフレームやデザインデータを見ながら、HTMLやCSSを設計します。この時に、必ず対象とする動作環境(デバイス、ブラウザ)の情報が必要です。最初は、頭の中でなんとなく方針を考えます。まとまったら、PSDなどのデザインデータから、画像を切り出し、HTML、CSSを書いていきます。

Webの決まり事(Web標準)に沿って、かつ、コンピューターが正しく文書を理解できる(セマンティック)ように文字を打って(マークアップ)、デザイン通りにブラウザで表示できるようにするのがマークアップの役割です。コンピュータが正しく理解できるように伝えなければなりませんので、当然、マークアップする「人」が、そのページの文章構造を正しく理解することが必要になってきます。

ここ数年、新しい技術がにょきにょきタケノコのように生えてきていて、スマホもどんどん新しいのが出てきて、解像度なんかもそれぞれバラバラだったりして、アンテナをいつも張っていなくてはなりません。新しい技術ってすぐに使えるわけじゃなかったりもするけれど、知らないってわけにはねぇ(/ω\)

テーブルデザインの時代とは比べものにならないほどの技術と知識が必要になっています。日々これ精進…
新たに覚える人は、覚えることが多くて大変ですねぇ(˘ω˘)コクリ

では、Qriousでの実際の流れを説明していきます。

提案に向けてのブレスト

プロデューサーのところに舞い込んだ提案依頼について、chatwork上でブレストが行われることがあります。この時点では、まだ受注していないので、担当も決まっていません。「○○したいんだけど、どんな風にできるかな~」なんて投げかけがあり、非Webのメンバーも含めてみんなが自由に意見を出し合います。いろんなバックグラウンドの人の意見が聞けるので、とっても勉強になります。

確定前のブレストには2つ大きな意味があって、1つはどういう方向性で制作していくかをクライアントや中の人と共有するため。もう一つは、制作に掛かる工数、スケジュールを大まかに把握するためで、プロデューサーは見積やスケジュールで無理がない計画を立て、ディレクターは中の人をアサインする場合、誰にどのタイミングで指示をしたり、準備させたりするかを考え、ワイヤーフレームを考えはじめます。

大切なのは「全体像を把握すること」。例えばページやコンテンツの一部分だけを聞かされても、それが果たして正しい処理なのかどうかが判断できませんよね。チーム全体で全容をしっかりと把握し、ディレクターやデザイナーと方向性や問題点を共有しておくことが、ロスや齟齬を亡くしてストレス無く制作していくコツだと思います。

事前にある程度聞かされると心構えが出来て、実際にアサインされたら「あ、あの時ブレストした案件、受託したんだぁ」ってちょっと嬉しくなりますよね(^_-)-☆

アサイン後

案件の受託が決まると、プロジェクトメンバーのアサインがあります。案件の規模によっては、複数のマークアップで挑むことも┗(`・ω・´)┛フンヌッ!

アサイン後に、案件用のグループチャットでミーティングに参加できるようになります。案件の概要や目的の説明を聞いて、デザインの方向性などを話し合っていきます。案件によっては、すでにデザインが進行していたり、デザインがクライアントさんから提供される案件もありますので、chatworkのログを追って状況を把握しておきます。

最近は、アニメーションなどの動きの全くないサイトはまずないので、動きについての打ち合わせも始まります。動きをつけることで効果的に見せることができる部分の指示がディレクターからありますので、そこにどんな動きを付けるかを相談していきます。イメージに近いサイトを見ながら、このサイトに実装が可能かどうか詰めていきます。また、使うCMSやフレームワークなども決まります。
PやDの引き出しの多さにはいつも感心させられています。わたしも頑張らねば☆・*:.。.(`・ω・´)9ガンバルゾ!.。.:*・☆

チャットで動きの方向性が決まったら、WFにもメモを追加してもらいます。文字で動きを説明するのは難しいのですが、参考サイトのURLと擬音語(「下からにゅ」とかw)で意志疎通を図ります(*´ω`*)

デザインしている間…

クライアントから、WFの承認をもらったらデザインに入ります。基本的にはディレクターとデザイナーのやりとりです。
この間、マークアップは何をしているかというと、ページデザインの進行を横目で見ながら、ローカルに開発環境を作ります。もうCompassは必須ですねぃ。複数メンバーで対応する場合は、ここで開発環境を揃えておかなくちゃ!

そして、内部的にデザインが固ってきたら、HTMLやCSSの設計を考えます。時間に余裕があれば、確認用にアップされたデザインのJPGから、大まかなHTMLを組んでみることも。

2015-02-06_mika_2

デザインデータからマークアップ

さて、クライアントからデザインOKが出たら、コーディング開始です。ここで、あっためていた設計をカタチにします。わたしは、トップページ⇒第2階層(テンプレ)⇒第3階層(テンプレ)のように上位階層からコーディングすることが多いです。

トップページは通常、下層とは違うレイアウトになることが多いので、最初にコーディングします。下層は、ページレイアウトや、要素が同じものや似たものを洗い出し、グルーピングします。そして、それぞれどのようにHTMLにするか、classを作るかを考えコーディングしていきます。

で、コーディングで心掛けていることは「美しいコーディング♡」

・Web標準に則った美しいマークアップ
・文書構造を理解して正しくマークアップ
 ⇒これでコンピュータに正しく伝える=SEO的にも大事!

・無駄の少ないコーディング
・表示速度を意識したコーディング
 ⇒表示速度のためにも、開発工数的にも大事!

・見た目にも美しいコーディング
 ⇒上を実行すれば、きれいにできるけど、見た目も大事!
  このあとのフロントエンドさんのためにも、
  自分の満足度的にもw(ユーザは誰も見ないけど…)

とはいえ、制作は時間との戦い。決まり事を守って、美しさ優先で動かなくなってしまったら本末転倒。ある程度は妥協して、動くものを作ります。ブラウザさんはわがままだったりしますしねw

確認と修正

ローカル環境できたものをテストサーバーへアップ。ディレクターに確認してもらいます。その後、CMSの組み込みや、JS、PHPなどのプログラミングをフロントエンドにお願いします。CMSの組み込み量産や、JSのライブラリをそのまま使う場合などは、マークアップがお手伝いします。
その後、クライアントにも確認をしてもらって、修正、本番アップ、本番確認で納品です。

マークアップは後半の工程ですので、どうしても押し気味になってしまうことがあります。なので、先回りしてできるところはやっておかないと、って思っています。自分の精神衛生的にもその方がいいですしね(•ө•)♡

それでは、フロントエンドの、のりこさん
お願いしま~す╰(*´︶`*)╯



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる