信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    知っておきたいgoogl chart活用法

    画面の入力欄に値を入れると任意のグラフが作成出来ます。画像保存するかできあがったURLをHTMLに埋め込むことでグラフが表示されます。なんだ手動かよと思ったアナタちょっと待った。これをマスターすると、プログラムで動的にグラフを作成することが出来るのです!PHPならなんと、2年前から一度も更新されていないAPI付き!では早速使い方を見ていきましょう。まずはリンクをクリック https://developers.google.com/chart/image/docs/chart_wizard?hl=jaいろいろありますが、折れ線グラフに挑戦上段真ん中をクリック Editor タブに遷移してサンプルグラフが表示されますこれを色いじることで好みのグラフを表示することが可能となっています初期値では折れ線xy(散布図?)グラフになってるのでLine Chartに変更値を変えることでリアルタイムにグラフも変化します。グラフの下のリンクはブラウザでリンクを開く用(Paste link in email or IM)と画像埋め込み用(Paste HTML to embed in website)ですメールで送る用はスタート画面の一番下に入力することでグラフの設定を再表示することが可能となっています。(Import chart from URL:) このツールはデータの保存が出来ませんが、これで保存の代用が出来ます。上から各項目の説明をしていきましょう■Title画像にタイトルを含める■Size画像サイズを指定。あまり大きなサイズでは表示出来ないようです■Data実際の数値入力部・Encodingデータ送信時に圧縮を行います。Simple、Extendedは圧縮を行う、Textは実数値でそのまま送信。圧縮方法についてはリンク参照。(https://developers.google.com/chart/image/docs/data_formats?hl=ja)Textは送信サイズが大きくなりますがその分、Scaleを使用する事でグラフ毎に軸に対する比率を変更することが出来ます。つまり、data1とdata2が同じ値でも別々の高さにすることが可能になります。・Sizeランダムデータ作成する際の個数・Visible表示/非表示切り替え。表示しないだけなら値を全部消せばいいのですが、後述するMarkersで利用する事ができます。・Scaleデータの範囲グラフの比率を変えることが可能ランダムボタンを押したときの範囲にもなります・Data Values半角スペース区切りで数値を入力■Data Style見た目を変更するときに利用、実際に操作すればわかると思うので割愛■Axes見出し部・Typeどこに配置するか・Range開始、終了値をセットするといい塩梅に目盛りの刻みを入れてくれます・Tick Marksメモリの上に印を付けるか・Lengths印の長さ・Labels数値以外の独自の刻みが利用可能になる■Axes Style見出しの色変え■Markers「Data」-Visibleが必要な理由がこれある種類のグラフを表示しながら別種のグラフも表示するために設定する実際操作するとわかるはずBounded Fill Marker囲まれてる範囲を塗るFill Marker下からグラフの範囲まで塗りつぶしRange Marker帯状に塗りつぶしShape Marker折れ線の各頂点を線で結ばないLine Marker折れ線グラフ折れ線グラフのサンプルで折れ線グラフ出しても意味ないのですが他のグラフと組み合わせることによりこうかは ばつぐんだ!■Fills/Margins/Grid使ってみて下さい実際に使用してみると黄色い枠に囲まれた値が赤い文字になってリアルタイムに変わるのがわかると思いますこの値をURLに付けて送る事によりグラフを表示しています。PHPでもこれを組み立て送信すると動的にグラフを作成することが可能となります。実際の使い方はまたの機会にします。
  • テクログ

    【gridster.js】パネル移動【すいすい動くよ】

    こんにちは。 少し面白そうなjQueryプラグインをご紹介します。 「gridster.js 」 ドラッグ&ドロップでパネル(要素)を並びかえれるようになります。日本語の解説は少ない気がしたので、何かのお役に立てば。 まずはサンプルを。 http://tcb.core-tech.jp/javascript/jquerygridster/(※Chrome推奨!!) 結構気持ちよく動いてくれます。 APIを利用して、要素の追加・削除、要素位置の取得なんかもできます。 では解説します。 まずは必要なファイルを読み込みます。 htmlでは、動かすパネルを用意します。        0     1     2     3     4     5     6     7     8     9     10     11    要素ごとにオプションとして、・縦横の表示位置(data-row, data-col)・要素の大きさ(data-sizex, data-sizey)以上4つの情報を持たせています。 そしてjavascriptで、上記のli要素を動かす準備をします。 /*** gridsterの利用準備 ***/ $(".gridster ul").gridster({   widget_margins: [10, 10], //widgetごとの間隔を設定   widget_base_dimensions: [50, 50] //widgetの大きさを設定 }); liを囲んでいるul要素を指定して、gridsterプラグインを呼び出しています。オプションには・パネルごとの間隔(widget_margins)・パネルの大きさ(widget_demensions)以上2つの情報を持たせています。 これでパネルがぐいぐい動くようになるはずです。liの点を消して色をつけてあげると分かりやすいかもしれないですね。 基本的な使い方は以上です。上のサンプルに沿って、APIも少しご紹介します。 ---------------------------------------まずはAPIを利用する準備をします。 /*** gridsterAPIの利用準備 ***/ var gridster = $('.gridster ul').gridster().data('gridster'); 1行だけです。これで各種メソッドが使えるようになりました。 ○add.widget()新しくパネル要素を追加するメソッドです。 /* 新しいwidgetを追加する - add_widget() */ $('#add').click(function() {   var widget_col = $('#widget_col').val();   var widget_row = $('#widget_row').val();   grid_num_max++;   gridster.add_widget(''+grid_num_max+'', parseInt(widget_col), parseInt(widget_row)); }); パネルの最大値+1にするためにいろいろしてますが、大事なのは最後の行です。・gridster.add_widget([追加する要素], [横の長さ], [縦の長さ]);パネルの表示領域内で、一番フィットした場所に要素が加わります。 ○remove_widget()指定した要素を削除するメソッドです。 /* 指定したwidgetを削除する - remove_widget() */ $('#delete').click(function() {   var li_obj = null;   var delete_num = $('#delete_num').val();   //gridster領域から、指定されたオブジェクトを取得   $('.gridster li').each(function() {     if($(this).html() == delete_num) {       li_obj = $(this);       return false;     }   });   //指定されたが存在すれば、削除   if(li_obj != null) gridster.remove_widget(li_obj);   else               alert('Widget not found...'); }); 消したい要素のオブジェクトを指定する必要があります。消しているのは下から2行目です。・gridster.remove_widget([削除するオブジェクト]);入力値(消したいliの番号)を取得して、全要素の中から番号を検索 → オブジェクトを取得しています。そのオブジェクトを引数として、remove_widgetメソッドを読んでいます ○gridster.serialize()指定した要素のサイズ、位置情報を取得するメソッドです。 /* 現在のwidgetの状況を調べる - serialize() */ $('#serialize').click(function() {   var li_obj = null;   var serialize_num = $('#serialize_num').val();   //gridster領域から、指定されたオブジェクトを取得   $('.gridster li').each(function() {     if($(this).html() == serialize_num) {       li_obj = $(this);       return false;     }   });   // 指定されたが存在すれば、情報表示   if(li_obj != null) {     var all_grid_data = gridster.serialize();     var grid_data     = gridster.serialize(li_obj);     //指定された要素をアニメーションで強調する     var li_width  = li_obj.css('width');     var li_height = li_obj.css('height');     li_obj.animate({'width': '0', 'height': '0'}, 'fast', function() {       li_obj.delay(150).animate({'width': li_width, 'height': li_height}, 'fast');     });     // パネル情報の表示     $('#grid-data').fadeOut('fast', function() {       $(this).html('');       $(this).append('Selected Widget :  '+serialize_num+'');       $(this).append('Location :  '+grid_data[0]['row']+' from the Top '+grid_data[0]['col']+' from the Left');       $(this).append('Size :  '+grid_data[0]['size_x']+' × '+grid_data[0]['size_y']+'');       $(this).append('Total Widget : '+all_grid_data.length+'');       $(this).fadeIn('normal');     });   // 指定されたがなければ情報表示を消す   } else {     alert('Widget not found...');     $('#grid-data').fadeOut('fast', function() {       $(this).html('');       $(this).append('Widget Info...')       $(this).fadeIn('normal');     });   } }); 16、17行目で取得しています。・gridster.serialize([情報取得するオブジェクト]);削除同様、オブジェクトを指定します。引数を指定しなければ、すべての要素の情報を取得できます。 取得したデータは以下のように連想配列で情報を保持しています。 var grid_data = gridster.serialize(li_obj); grid_data[0]['row']; // 縦の位置 grid_data[0]['col']; // 横の位置 grid_data[0]['size_x']; // 縦サイズ grid_data[0]['size_y']; // 横サイズ --------------------------------------- リッチなインターフェイスで「おー」となるのはやっぱり楽しいです。 が、このプラグインでは、位置情報を保持する機能は備わっていないようなので、使い所が難しいのかなとも思います。クッキーに保持、DBへ登録、等々の処理を加えることで、もっと実用的になる気がします。 これを見て下さって、何かしらピーンと来るものがあれば幸いです。
  • テクログ

    FuelPHPでHTML_Emojiを拡張して絵文字メールからHTMLメールを作成、送信する

    HTML_Emojiを使用すると、ガラケから送信されたメールの絵文字を、imgタグに変換することができます。http://libemoji.com/html_emojihttp://libemoji.com/downloadこれは、webページで表示することを前提とした機能なので、EmailパッケージのHTMLなbodyにそのままは使えません。http://fuelphp.com/docs/packages/email/introduction.html以下、FuelPHPでHTML_Emojiを拡張して、EmailパッケージのHTMLなbodyとして使う例です。classes/my/html/emoji.php* HTML_Emojiの配置箇所はrequire_onceの通りです。  'docomo',             'i-mode'   => 'docomo',             'imode'    => 'docomo',             'au'       => 'au',             'kddi'     => 'au',             'ezweb'    => 'au',             'aumail'   => 'aumail',             'softbank' => 'softbank',             'disney'   => 'softbank',             'vodafone' => 'softbank',             'iphone'   => 'iphone',             'j-phone'  => 'jphone',             'jphone'   => 'jphone',             'willcom'  => 'docomo',             'emobile'  => 'docomo',         );         if (isset($carrier) === false) {             $carrier = HTML_Emoji::_detectCarrier();         }         $carrier = strtolower($carrier);         $carrier = isset($aliases[$carrier]) ? $aliases[$carrier] : 'pc';         if (isset($instances[$carrier]) === false) {             $dirname  = substr(__FILE__, 0, -4);             $filename = $dirname . '/' . ucfirst($carrier) . '.php';             require_once APPPATH.'vendor'.DS.'HTML'.DS.'Emoji'.DS.'Pc.php';             $instance = new My_Html_Emoji_HtmlMail();             $instance->_carrier  = $carrier;             $instances[$carrier] = $instance;         }         return $instances[$carrier];     } } classes/my/html/emoji/htmlmail.php* $dir値は調整する必要があります。 cids = array();     }     function _convertCharacter($matches)     {         if (isset($this->_translationTable) === false) {             $this->_initTranslationTable();         }         $utf8 = $matches[0];         if (isset($this->_translationTable[$utf8]) === true) {             $sjis = $this->_translationTable[$utf8];             list($width, $height) = $this->_getImageSize($sjis);             $dir = DOCROOT.'public'.DS.'assets'.DS.'img'.DS.'common'.DS.'emoji_images'.DS;             $file = $img_root.bin2hex($sjis) . '.gif';             $this->cids[] = array( 'cid' => $file,                 'file' => $dir.$file,             );             return '';         } else {             return $utf8;         }     } } 以下、使い方の例です。* HTML_Emojiの標準的な使い方を踏襲しています。* HTML_EmojiがPHP4もサポートしているため、エラー出力レベルを一時的に変更しています。* $emoji->cidsには、Emailパッケージのattachメソッドで使用する情報が入っています。 $from = 'xxx@yyy.zzz'; $to = 'xxx@yyy.zzz'; $subject = 'xxx';   $E = error_reporting(); error_reporting(0);   $emoji = My_Html_Emoji::getInstance('pc');   $body = '絵文字入りのデータ';   $fmt = ' %s '; $html = nl2br($body); $html = $emoji->filter($html, 'output'); $html = sprintf($fmt, $html); $html = mb_convert_encoding($html, 'ISO-2022-JP');   $email = Email::forge();   $email ->from($from) ->to($to) ->subject($subject) ->html_body($html);   foreach($emoji->cids as $cid) { $email->attach($cid['file'], true, 'cid:'.$cid['cid']); }   $email->send();   error_reporting($E); まさかこのブログでの初FuelPHPネタがガラケ関係とは。
  • テクログ

    元技術者(非デザイナー)がWebディレクターに転職するためにした事と、そのメリット

    はじめまして、シューさんです。 ツキイチ企画で、人間毛筆をやらせて頂きました、私です。 今の会社ではWebディレクターなどという大仰な肩書きを頂いておりますが、私はデザイナー上がりではなく、金融・流通システム開発の下流工程で働くエンジニアでした。 一般的なフローだと、Webデザイナーとして就職し、数年経験して業務の中でディレクションにも携わり、ステップアップ先としてWebディレクターになる、というのが普通ではないでしょうか。 それを一切無視して、「なぜこの職業に就けたのか」自分なりに考えた結果と、また、「前職を経てこの職業になって感じたメリット」を、今回はライフハック的に書きたいと思います。 この世から、不幸なエンジニアが少しでも救われますようにと願いを込めて…   そもそも何でWebディレクターになろうと思ったのか? エンジニア時代は孫請けの開発会社で働いていたので、要件定義から関わる事はできず、その辺りは上流SEと呼ばれる元請のしかるべき社員様がやっていたり、マネージャーと呼ばれている年配のエンジニアの方がしていました。 それにより、何が起こるのか? 自分が携わっていないところ(上のほう)から、着手後に追加で来る仕様変更、システム改修と称した仕様変更、バグ発覚による仕様変更(※これは単純に不具合修正ですね)、仕様変更、仕様変更、仕様変更…etc そして、改修によるテスト、テスト、テスト、テスト、テスト、テスト、テスト、テスト… つまりこんな感じ。     while(1){      deviation(); /* 度重なる仕様変更 */      test(); /* テスト漬けの日々 */      private()-i; /* 減っていくプライベートの時間 */      i++;  }  break; /* 無限ループから抜け出せなくて俺は死ぬ */   プログラマ30代定年説、なんていうのを真に受けて「自分もマネジメントスキルを身につけたり、上流工程が出来るようにならなくちゃ!」って思って勉強したのに、来る日も来る日も追加仕様対応、不具合対応、障害対応… もちろんリスク管理などの観点から身についた事も多かったですが、それ以上に疲弊して、すり切れてしまったのが正直なところです。 段々と、もっと自分が興味を持てる分野で働きたいと考えるようになりました。 情報工学科出身だった為に自分にはプログラムを書くことしか出来ないという後ろ向きな理由(今考えると愚かでしたが)から前職に就いていたのですが、 本当はかっこいいデザインとかやりたい、仕組み作りとかもしたい、あと勉強したマネジメントスキルとか、上流工程で要件定義とかやりたい、もっと文化的な生活を営みたい、モテたい!という欲張りな気持ちからこれが全部出来る仕事を考えたら、   Webディレクター   だったのです。   Webディレクターに成るべくやったこと 前置きが長くなりましたが、Web業界で働くにあたって知っておかなくてはいけない事は結構ありました。この記事と重複する部分はありますが、基礎としてこんな事を学んできました。   HTML、CSSの勉強 これは当たり前ですね。ただし、基礎的な範囲までで問題ないと思います。もちろん、深く理解しているに越した事はないですが。タグやプロパティを覚えるのは、フレームワークの関数を覚えるのと一緒です。   Photshop、Illustratorの使い方、基本的なデザインの考え方 エンジニア出身だと、ここが一番ネックに感じることでしょう。アートディレクションも必要になるでしょうし、デザイナーの方に指示を出すときに、言葉を知っているのといないのではイメージの共有具合が全然違います。「間延びして見えるから、タイトル画像のAとWにカーニングを設定して~」なんて言えたらきっとモテます。これは使いまくるしかないのですが、とにかく一通り、ソフト操作のやり方を試しましょう。何を作るためにどんな事をすればいいのか、そのイメージを持っていることが大事です。デザインセンスなんてものは、専門家(デザイナー)に任せたり、色んなサイトや作品に触れる事で後から身につけていければ良い事だと思うんです。   PHP、JavaScript等、サーバーサイド言語の勉強 この辺りは元エンジニアの方ならさほど苦労しないと思います。Webプログラマだった方はもう解っているはずですし。私が使ってきた言語はC、C#、VBなどでしたが、アルゴリズムの組み方はどの言語でも大体一緒です。そのアルゴリズムをプログラム言語に起こすだけ!       でも独学でやるのは不安…なんてあなたに。これらをなんと、タダで教えてくれる所があります。そう! \ ⊂[J( 'ー`)し <ホラたかし!  \/ (⌒マ´   (⌒ヽrヘJつ     > _)、     し' \_) ヽヾ\           丶_n.__           https://www.hellowork.go.jp/              ̄   (⌒              ⌒Y⌒ ハローワークの求職者支援訓練制度を使えば、タダどころか条件さえ満たせば、逆に月10万円もらいながら上記の事を教えてくれます。(※)(お金を貰う為には資産が200万円以下であるとか、色々と制約はありますが…)ついでに、フォトショップ等も学生価格(アカデミック版)で買えます。   ※ただし、こんな記事もあるので学校選びは慎重に…。私が通った所では、授業に対するフィードバックを伝えられる場があったので、「授業の進行ペースが遅すぎます!」なんて言って改善して頂いた記憶があります。また、入学前に面接を実施していると思うので、そこでしっかり学習方針を確かめておくべきです。   私は前職を辞めた後、Web管理者養成科(実践コース)というのに行きました。 「そんなの何の役に立つんだ?」なんて反論もあるかもしれませんが、何も知らない人間からしてみたら、取っ掛かりとしては悪くないかと感じています。 そして4ヶ月間、みっちりとWebの勉強をし、ひたすら「ポートフォリオサイト作り」をしました。 そして、そのサイトのスナップショットに簡単な注釈をつけたものを印刷し、面接に持っていくことにしました。 ↓恥ずかしながら、私が作ったポートフォリオを参考までに置いておきます。(思いっ切り実名出てますが…) ■ポートフォリオ(pdf注意)   就職活動 とにかく今の時代、就職活動は厳しいものになるでしょう。 自分なんか雇ってくれる場所なんか無いんじゃないか?圧迫面接を受けるんじゃないか?そもそもエンジニア上がりの自分、ディレクター志望と言ってもコミュ障なんですけど?不安は尽きないと思います。   でも心配しないで下さい。ポートフォリオを作っておけば、面接の場では基本的に、作ってきた資料を説明すればいいのです。 「あなたを雇う事で弊社に何のメリットがありますか?」なんて怖い質問も、挙動不審になってしまう事も、自分の作品に説得力を持たせられれば関係ありません。 その位、割り切って臨みました。   ・誰をターゲットと想定してこのサイトを作ったか?・何を考えてこのデザインにしたか?・どんな想いを伝えたいのか?   自分で作ったサイトですから、その辺りはちゃんと見えているはずです。それを説明するだけ!ねっ?簡単でしょう? 仕事を始めてから気付いたのですが、それを説明するのってWebディレクターがやる要件定義やプレゼンテーションで大事なポイントなんです。   デザイナーではなく、元エンジニアである強み 下流SEとはいえ、どんな開発でも工程管理などは必須です。やれガントチャートだ、クリティカルパスはどこだ、なんてのはエンジニアの諸兄姉なら馴染みのある言葉でしょう。その考え方って、Web業界でも使います。特に進行管理を行うディレクターには、必須スキルの一つです。 Web制作と開発は進行管理が似ている → 前職で得た知識を生かして仕事ができる! って事です。 またエンジニアであれば、アルゴリズムを組むときに論理的な思考を自然と身につけているはずです。AがBだからCである。って感じで。それって、デザインを推敲するときに大事じゃないですか? だって、「このデザインは何故こうしたか」って説明できないで「ただカッコいいと思ったから」だと、お客さんに納得してもらえるはず無いじゃないですか。そんなの主観ですし。 そしてその逆としても生かせます。つまり、デザイナーに要件を満たすものを作ってもらうためには、どんな情報が必要か?あらかじめ考えておいてお客さんにヒアリングすることもできます。 デザイナー出身でも論理的な思考が出来る方はたくさん居るでしょうが、エンジニア出身だったらそのあたりは必ず持っているスキルなのではないでしょうか。 上記で挙げた事って、強みだと思うんです。アピールポイントや実績なんて無いよ、全然違う業界だし…って悩まないで、そういう切り口で考えれば良いじゃないですか。   まとめると… ・非デザイナーだとしても、開発に携わっていればWebディレクターで生かせるスキルは山ほどある。 ・不安なデザイン部分は、専門の人に分業しちゃうのが一番!だけど理由は大事だからそこは論理的思考で推敲する。 ・求職者支援訓練制度(ハローワーク)は意外と使える。 ・就活ではポートフォリオの説明をガンガンする。 ・Webディレクターになったけど、別にモテませんでした。   という事です。 私はまだまだひよっ子のWebディレクターです。だから、勘違いで思い上がっていることもあるかもしれません。でも、少なくともこれは言えます。 毎日色々なことを吸収して、自分が成長できるのって楽しいですよ。 ただ上から言われた事をやるだけじゃなくて、自分で要件定義から関わった案件が形になっていくのってやりがいがある仕事です! もし、ただ変わりゆく仕様に振り回されているだけの日々を送っているエンジニアの方が居たら、疲れきってボロボロになる前に、Webディレクターを目指してみるっていう道もあるんだよって言いたかったのです。   次回予告 今回は技術的な話から少し横道に逸れてしまいましたが… 今後、テクログではこんな事を書いていこうと思っています。   ・ひよっこWebディレクターが一人前になるために心がけている事 ・案件が炎上するリスクを避けるために準備しておくべき事 ・20代、ソーシャルネット世代に訴える企画の上げ方   この次も、サービスサービスぅ!
  • テクログ

    HTML5の要素について

    技術ブログ、初投稿です。。。初というのは何事も緊張してしまいますw本題に入りまして・・・HTML5で追加・変更・廃止された要素について書いてみたいと思います。では、追加された要素をピックアップsection, article, aside, hgroup, header, footer, nav, figure, figcaptionvideo, audio, source, embedmark, timeruby, rt, rbcommanddetails, summarydatalist, keygen, output(API用)canvasprogress, meterふむふむ、ここで覚えておきたいのはheader、footer, sectionでしょうか。個人的にな話ですが、rubyは電子書籍作るときに使ったことがあります・・・。API用のcanvasは図を描くときに使うので、今後よく使われるんでしょうね~。次は変更された要素a, address, b, hr, i, label, menu, small, strongこれは役割が変更されたようです。b要素などは文字を太くするために使ってたけど、商品名や機能の名称などのキーワードを意味するようになったようですよ。最後に・・・廃止された要素basefont, big, center, font, s, strike, tt, uframe, frameset, noframesacronym, appletisindex, dircenterなどは使ってた人は結構いるのではないでしょうか??ちなみに私は使ってました。。。廃止になってるので、使ってた人は心掛けてくださいね。以上、html5の要素についてでした。
  • テクログ

    WEBディレクターというお仕事

    生ハム原木の購入を真面目に考えているなかむです。   友人・家族・恋人に「何の仕事してんの?」と聞かれた時に 説明しづらいWEBディレクターというお仕事についてご説明いたします。 これからWEBディレクターを目指す方も参考にしてもらえれば幸いです。   まず、WEBディレクターというお仕事を一言で表すと   ウェブサイトを作る上での現場監督   と言えるでしょう。 クライアントとやりとりを行いデザインや仕様を決めたり、また提案したり 制作チームのデザイナーやプログラマーを指示し管理を行ったり・・・ 多岐に渡ったWEBディレクターというお仕事を7つに分け解説していきます。   1.営業能力  ※画像と本文とは何も関係ありません。   クライアントとお話するお仕事なので、営業能力は必須です。   契約をまとめる商談 自分たちを売り込むプレゼン クライアントのニーズを掴む企画提案   など 営業担当と同行し、より専門的なお話をします。   2.調査能力  ※画像と本文とは何も関係ありません。   クライアントの業種や扱っている商材について競合他社の状況を調査します。 マーケティングな調査からウェブサイトの調査まで行います。 3.コミュニケーション  ※画像と本文とは何も関係ありません。   デザイナーやプログラマー、SEOコンサルタント、サーバ担当など 関係部署をまとめるためのコミュニケーションです。 プロジェクトが円滑に進むかどうかディレクターの腕の見せ所ですね。   4.要件定義  ※画像と本文とは何も関係ありません。   クライアントが何をしたいかをヒアリングし、実装するには何が必要かどういう仕様にするのかをまとめます。 クライアントの要望が何なのかを見極めないと、仕様がコロコロ変わってしまうことになります。 プロジェクトを円滑に進めるためにも、慎重かつ大胆にヒアリングをする必要があります。   5.案件管理 ※画像と本文とは何も関係ありません。   案件管理には、計画・リスク測定・進捗管理が必要です。 無理のない余裕のあるスケジュールを立てられれば一番いいんですが、当然キツいスケジュールの時もあります。  そういう場合の決断力も必要となります。   6.サイト設計 ※画像と本文とは何も関係ありません。   ワイヤーフレームの作成 サイトマップの作成 デザインのコンセプト SEOなどの配慮 などウェブサイトの設計です。   7.WEBの知識 ※画像と本文とは何も関係ありません。   最新のトレンドやデザイン知識、新しい技術や流行りのウェブサービス、最新デバイスなど常にアンテナを張って知識を蓄えておく必要があります。 HTMLやCSS、SEO、プロモーション、サーバにまつわる知識などもあると望ましいです。     何となくWEBディレクターというお仕事が掴めましたか? 次回からは各お仕事を掘り下げてご紹介したいと思います。