トップ > 制作・開発 > Qrious的Web制作スタイル – プログラミング
制作・開発

Qrious的Web制作スタイル – プログラミング

Qrious的Web制作スタイル - プログラミング

こんにちは。フロントエンドの、のりこです。

コーディングのMikaさんからバトンをもらって、今回はプログラマの案件への関わり方についてお話していきます。

ご注意

タイトルがプログラミングなのですが、私はプログラマであるか?と聞かれれば・・・イエス、とはちょっと言いづらいかも。
わたし自身はコーディングをメインの生業としており、コーディングの延長としてプログラム方面に進んでいますので、プログラム専業でされる方とは考え方や進め方が違うかもしれませんが、あくまでQriousで制作する場合はこのように進める、ということで読んでいただければと思います。

リレー記事一覧
  1. QriousのWeb制作スタイル – プロデュース(はじめに)
  2. QriousのWeb制作スタイル – ディレクション(3つ前)
  3. QriousのWeb制作スタイル – デザイン(2つ前)
  4. QriousのWeb制作スタイル – コーディング(1つ前)
  5. QriousのWeb制作スタイル – プログラミング(イマココ)
  6. QriousのWeb制作スタイル – まとめ(最後に)

Webプログラマってどんな人

静的なhtmlだけでは表現できないシステム的な動きや、データベースから引っ張ってくるデータの条件を、サーバーやブラウザが理解できる言語で書きます。例えばPHP,cgi,perl,JavaScript,jQuery…などなど。
また、クライアントとディレクターが一生懸命考えた動きを、聞き取るときに勘違いしては元も子もないため、コミュニケーション能力や日本語読解能力も必要だと考えます。

プログラマの役割

Qrious内でWeb制作をする場合になりますが、ひとつは、CMS(Wordpressなど)の構築。
建築で言えば『基礎』を作ったり『柱』を立てて行ったりするような感じ、直接目には触れない部分を作成します。
ディレクターによって作られたワイヤーフレーム(設計図)を元に、それぞれのページの目的に合ったデータを抽出するように、プログラムを仕込んだテンプレートを作成していきます。
もうひとつは、javascript。
ライブラリを使用するものの場合はコーディングの方にお任せすることもありますが、がっつり改変を必要とされたり、1からjavascriptを書く必要が出てきた場合は私たちの出番です。
また、javascriptを使って、よりインターフェイスやデータを自然に見せることが出来る場合はコッソリ仕込んだりします。

違和感がなく動くことこそがちゃんと仕事をした証なので、派手さは全くと言っていいほどありませんが、何も突っ込まれないことこそが最大の賛辞ではないでしょうか?(笑

2015-02-27_noriko_2

実際の流れは以下のような感じです。

見積もり

まず見積もり段階で、あらかじめ導入するCMSや使用したいjQueryのライブラリなどについてのイメージについて打診を受け、場合によっては試作なども交えながら、ディレクターと打ち合わせ・大まかな工数計算を行います。
限られた情報から、概算ではありますが工数を出し、それが見積もりにダイレクトに反映されるので責任重大です。
普段から色々と場数を踏んでいて、的確に工数を見積もれることが重要になってきます。
この段階ではざっくりと、○日くらいかかります、と人日計算でお伝えすることが多いです。

案件決定

更に詳しく、使用するCMSや必要なプラグイン・動かしたい部分が明らかになってくると、ワイヤーフレームを起こすために必要な部分から検証に入ります。
jQueryライブラリの場合などは、レイアウト変更や動きの変更がどの程度可能か試作してみて、ディレクターの希望に添える部分・添えない部分を洗い出していきます。予算が許す限り、改変を加えながら可能な範囲を広げていきます。

この段階で試作を怠ると、制作に入ってしまってからワイヤーフレームに書かれた動作が実現できなかった!という事になりかねませんので、細かいことでも綿密に打ち合わせを行っておきたいところです。

また、作者の違うjQueryライブラリを複数どんどこ詰め込んでいくと”当たる”ことがままあります。
ですので、採用するライブラリはこの段階でほぼ決定しておくのがベストです。この段階で当たることが判明しても、別の似た動きのライブラリに差し替えたり、共存させるための施策に時間を割くことができます。

デザイン中

デザイナーが作業に入ると、裏でせっせと試作やパラメータをいじってあれこれ実験したり、取り掛かります。
動きに絡む部分でパーツが必要になる場合はデザイナーにパーツの作成をお願いします。
(スライダーの矢印・ライトボックスの見た目や矢印・クローズボタンなどなど・・・)
また、CMS案件だとプラグインのインストールやディレクトリマップに合わせた固定ページの準備、ワイヤーフレームに沿ったカスタムフィールドやカスタム投稿タイプなど、フォームがある場合はフォームの設定準備を始めます。

コーディング中

作業の中で一番密接にやり取りする部分です。
試作したコードをお渡ししてあてはめていただいたり、その段階で動作がうまくいかないものなどがあるとこちらでソースをお預かりして確認を進めたり、協力しながら作業を進めていきます。
また、CMS案件の場合は、クライアント確認済みのデータから順にCMSに乗せていく作業も並行して行います。
早めから作業フローが確立できると、
マークアップの手がいっぱいになった時に
「簡単な修正なのでこちらで手直ししておきますね」
また私が手いっぱいの時に
「CMSちょっといじっておきました」
など、お互いを助け合ったり、息の合ったやり取りができるようになってくるところもグループ制作の醍醐味です。

リリース直前

本当は事前に試作もきっちりとして、余裕でリリースを迎えたいところですが、作業工程が一番最後ということもあって、どうしてもリリース直前にバタバタしてしまいます。
・一度確認して大丈夫だったはずのところが動いてない!
・CMSで、作ってあるページへ誘導するリンクが実はどこにもない!
・当然できると思っていた動きが実現できないことがリリース前日に明らかに!
もうそれはそれは数知れず、トンでもないことが起こってくれます。
場合によってはデザインまでさかのぼって総力で対応することも。
もう少しでリリースなんです!ここは落ち着いて、対処に当たりたいところです。
ここできっちり間に合わせることが出来れば、羨望のまなざしで見られること間違いなし!!!(ホントカ?)
(ホントです メンバー全員より)

ある程度、不具合の当たりがついて、リカバーできることが、所謂「経験」というところで、「実績」に繋がると思いますね。
デザインからマークアップ、フロントエンド、場合によってはサーバー管理まで、一通りこなせる私ではありますが、一人で案件を請けると、どうしてもデザイン~マークアップに力が入りがちになります。
動かすことにのみ注力させてもらえることがありがたいですし、「私頼られてる!!」っていう実感が味わえます(笑。

Qriousではプログラム女史、絶賛大募集中でありますので、ぜひ私とWordpressやCMS,phpについて語り合いましょう!!!

それでは、まとめ記事、よろしくお願いしま~す!



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる