旭タンカー株式会社

　旭タンカー株式会社は、主に石油製品を海外から輸送する外航業務だけでなく、国内での輸送である内航業務もする海運会社で、その内航業務においては日本有数の規模を誇る海運会社です。
　そのような旭タンカー株式会社は、より早くより正確な情報を発信できるよう更新管理できるシステムを備え、スマートフォンやタブレットなどのデバイスにも対応しており、かつより多くの方に見てもらえる集客力のあるホームページにするために、ホームページのリニューアルを当ホームページ作成会社.comに依頼されました。そのような旭タンカー株式会社様のホームページの制作過程やその運用のされ方などをご紹介します。

制作イメージ

ホームページの制作目的

ホームページを作り変えた理由

　旭タンカー株式会社様は既にホームページを運営されていましたが、主に以下の3点に困っていらっしゃいました。

1. 更新管理ができず、適時情報発信ができない
2. 集客力が低く、目的の人に見てもらえない
3. スマートフォンなど新しいデバイスに対応していない

　先ず1点目として、石油などの危険物を巨大なタンカーで輸送されている旭タンカー株式会社様は、その責任として、何かあった際などに最新の情報を皆様に伝える必要がありますが、以前のホームページでは管理会社様に原稿をお送りし、それを反映して頂くフローであったため、情報を掲載できるまでに時間がかかってしまいました。そこで、自分たちでホームページを追加・編集できるようにし、最新の情報をすぐに公開できるようにすることをリニューアルの1つ目の目的とされていました。

　2つ目の目的は、折角のホームページが殆ど見られていない現状を改善することでした。「旭タンカー株式会社」「旭タンカー」などで検索されれば検索結果に表示されましたが、それ以外のキーワードでは検索結果に表示されなかったため、既に旭タンカー株式会社様を知っている方以外には見てもらえず、新規の顧客開拓や採用などに貢献していなかったのです。そのため、まだ旭タンカー株式会社様を知らない方にも情報を届けられるようにすることを、リニューアルの2つ目の目的とされていました。

　そして3つ目としては、新しくどんどん登場しているデバイスに対応していなかったことへの対応です。スマートフォンやタブレットなど、新しいデバイスが多々登場する中で、パソコンの表示にしか対応していなければ、利用しにくく折角来た訪問者が目的を果たせず帰ってしまうだけでなく、検索順位もなかなか向上しません。そこで機会損失を無くすために、マルチデバイス対応することを3つ目の目的とされていました。

リニューアルの理由を実現する方法

　ホームページ作成会社.comの提供するサービスは、旭タンカー株式会社様のご希望される内容を全てかなえられるため、通常通りのサービスをご提供することにしました。以下、ホームページ作成会社.comのご提供するサービスの中で、旭タンカー株式会社様のご希望に対応する内容となります。

1. 誰でも更新管理ができ、デザインやレイアウト変更までできるシステム^※１
2. SEO対策の専門家による、戦略策定と構造設計及び、システムへの反映^※２
3. レスポンシブデザインによる、全デバイスへの最適表示^※３

　また、新たに強化を希望された採用関連のページに関しては、応募フォームからデータの蓄積方法まで、応募者のデータをより安全により簡単に補完するシステムの構築を提案するなど、必要に応じてホームページに留まらない作業フローなどの提案と構築も行いました。

※1 ※3：ホームページ作成会社.comのサービスは、更新管理ができるだけでなく、デザインやレイアウト変更、多言語対応などにまで対応する非常に多機能で定評のある独自システムを利用しております。また、このシステムは、パソコン用のホームページを制作するだけでスマートフォンやタブレットなどのデバイスにも最適化されたホームページも運用できるレスポンシブデザインにも対応しております（レスポンシブデザインの詳細は『管理が簡単なスマートフォン対応』をご覧ください）。　※2：ホームページ作成会社.comの独自システムは大手アフィリエイトサービスプロバイダーはその高いの集客力（SEO対策効果）からスターターキットに採用されており、また、運営会社であるアンドバリュー株式会社はSEO対策の書籍を出版しAmazonランキング1位になったり、各種SEO対策ツールを開発したりしている集客の専門企業です。

ホームページの制作過程

ご提供したサービス

　ご希望の機能などは、テンプレートを利用した『格安ホームページ作成プラン』で十分制作できましたが、独自のデザインのホームページをご希望されたため、『完全おまかせプラン』でサービスを利用して頂き、デザインをゼロからご相談しながらホームページの制作を行いました。
　また、既存のホームページでは、表などを多用していたため、スマートフォンなど画面の小さなデバイスでは見にくくなってしまうところが多かったため、それらの表示をどのようにするかなどを含め、既存ページの移管作業もご提供致しました。

ホームページ制作の作業分担

　集客力が高く、管理しやすいホームページにするめの戦略や構造設計はもちろん、デザインや写真の撮影、既存ホームページの移管作業なども、全てホームページ作成会社.comが行いました。

ホームページの制作期間

　ご依頼頂いたのが3月の中旬で、そこからご希望を伺い、必要機能の洗い出しを行い、4月中旬からデザイン案の作成とデザインに当社のシステムを組み込む作業を行っていきました。ご相談しながらの作業であったため、デザインの完成までに約1ヶ月かかり、それから利用画像の撮影や既存データの移管作業を行い、最終チェックを経て、6月末の納品となりました。
　実質2ヵ月半程の作業期間で納品となりましたが、作業を担当される方の状況や移管するデータの量などにより進捗は変わりますので、この規模のホームページでしたら、納品までに2ヶ月～3ヶ月程かかると考えて頂けると幸いです。

ホームページの今後

今後の運用イメージ

　リニューアルによって、更新管理ができるようになったと共に集客もしっかりできるようになり、適時最新の情報を発信していけるようになりました。また、これまでかかっていたページの追加や更新にかかる費用もなくなり、低ランニングコストでの運用も実現されました。
　加えて、採用関連の情報を強化したところリニューアル後すぐに応募があり、集客の面でも着実に成果が上がっており、ここもしっかりと行っていくことで、新規顧客開拓や採用関連で大きな成果が上がるように進めて行って頂きます。

納品日：2015年6月30日　制作期間：2ヶ月半　記事作成日：2015年7月31日

京都大学大学院農学研究科 応用生物科学専攻

　京都大学大学院農学研究科の応用生物科学専攻様は、陸地や海洋に生息する微生物から高等動植物にわたる多様な生物を対象とし、生物資源の生産・利用・加工の諸側面に含まれる生物学的・化学的原理の探究とその応用に関する様々な分野の研究と教育を行っている大学院の専攻科です。
　基幹の7講座16分野と1協力分野から構成されており、世界で活躍する研究者を育てると共に、先端的の基礎研究や応用的な展開研究および産学官連携研究を推進している教育組織です。そのような京都大学大学院農学研究科の応用生物科学専攻様のホームページの作成過程やその運用のされ方などをご紹介します。

制作イメージ

ホームページの制作過程

ホームページ作成会社.comが制作するに至った理由

　京都大学大学院農学研究科の応用生物科学専攻様は、デザイン性が高く、更新管理や集客の面も十分で、なおかつセキュリティやデータのバックアップの面などから安心して利用できるホームページを安く作成してくれるサービスを探していらっしゃいました。その時に、当サービスの兄弟サービスにあたる自分で作る簡単格安ホームページ作成サービスのFunMakerを利用してホームページを作成している、京都大学舞鶴水産実験所様がご紹介下さったことがきっかけで、ホームページ作成会社.comが京都大学大学院農学研究科の応用生物科学専攻様のホームページを制作することとなりました。

ホームページ制作の作業分担

　FunMakerとホームページ作成会社.comのどちらをお勧めするか迷いましたが、実際に制作作業をする方がいらっしゃらず、定期的に担当の方が変わるとのことから、私達がある程度作成し、人が変わっても運営していける管理のしやすい設計にするために、ホームページ作成会社.comのサービスをご提案しました。
　また、まとまったご予算が用意しにくいとのことだったため、最低限のサービスとなる格安ホームページ作成プラン（会社ホームページ）をご提案し、コンテンツの内容が専門的になることから利用する写真や文章は担当の方に揃えて頂くこととしました。

ホームページの制作期間

　ご連絡頂いたのが2月で大学入試と年度末が重なっており、利用する写真やコンテンツを揃えるのに時間がかかったため、最低限の制作を行い納品後ご担当の方に追加で作成して行って頂く形ではありましたが、納品までに1ヶ月半程かかってしまいました。ただ、写真やコンテンツを滞りなくご用意頂ければ、この規模のホームページでしたら通常は半月～1ヶ月程で納品できます。

ホームページの今後の運用

　世界的に活躍する大学のホームページのため、多言語対応が必須でありこの対応をどうするか相談しているところです。同じ京都大学の舞鶴水産実験所様は担当の方がいらしたので、多言語対応も含め全て先方で作成されましたが、応用生物科学専攻様はまとまった作業をできる方がいらっしゃらないため、予算を組んで頂き、私達が追って作成することになるかと思っております。

納品日：2015年3月13日　制作期間：1ヶ月半　記事作成日：2015年5月22日

【定義】：表のヘッダセルを指示するHTML
『th』はヘッダ行のセルを表します。

thの使用例［HTMLソースコード］

<table>
<caption>ホームページ作成サービス</caption>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

thの使用方法解説

　「th要素」は、表のヘッダセルひとつ(table head data)を表します。「tr要素」の中で利用します。

【定義】：表のセルを指示するHTML
『td』は表のデータ・セルを表します。

tdの使用例［HTMLソースコード］

<table>
<col style="background : #cdcdcd ; ">
</col>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

tdの使用方法解説

　｢td要素」は、表のセルひとつ(table data)を表わします。「ｔｒ要素」内に利用します。

【定義】：表の行を指示するHTML
『tr』は表の行を表します。

trの使用例［HTMLソースコード］

<table>
<caption>ホームページ作成サービス</caption>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

trの使用方法解説

　「tr要素」は、表の横1行(table row)を表わします。
　「thead要素」「tbody要素」「tfoot要素｣、あるいは｢table要素」の子要素として利用することができます。
　さらに、この「tr要素」の中には「td要素｣、または｢th要素」を利用してデータ・セルを表わすことができます。

【定義】：表のフッタ行を指示するHTML
『tfoot』は表のフッタを表します。

tfootの使用例［HTMLソースコード］

<table>
<caption>ホームページ作成サービス</caption>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
<tfoot>
 <tr>
<td>ホームページ作成サービス</td>
 </tr>
</tfoot>
</table>

tfootの使用方法解説

　「tfbot要素」は、表におけるフッタ行(table foot)を表わします。
　「tfoot要素」は、「caption要素」「colgroup要素」「thead要素」「tbody要素」「tr要素」よりも後に入れます。
あるいは、「tbody要素」「tr要素」より前に入れることもできます。従来は、「tbody要素」よりも前に入れることが正しいとされていましたが､「HTML5」では｢tbody要素」よりも後ろに配置しても問題はありません。
　「tfoot要素」は、「table要素」内にひとつだけ入れることができます。

必ず表組みの最後の行として表示される

　「tfoot要素」は、「thead要素」「tbody要素」よりも後に入れることが多いと思いますが、「tbody要素」よりも前に記述することも認められています。
　ただし、どの場所に｢tfoot要素」を記述したとしても、レンダリング時は必ずいちばん最後に表示されると覚えておきましょう。

【定義】：表の行グループを指示するHTML
『tbody』は行グループを表します。

tbodyの使用例［HTMLソースコード］

<table>
<col style="background : #cdcdcd ; ">
</col>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

tbodyの使用方法解説

　「tbody要素」は、表における行グループ(table body)を表わします。
　「ｔbody要素」は、「colgroup要素」や｢thead要素」よりも後、「tfoot要素」よりも前に記述する必要があります。

　表の本体、ヘッダでもフッタでもない部分を表わす要素として利用します。
　「tbody要素」を使わず、直接「tr要素」を利用することもできますが、「tbody要素」を使ったほうがHTMLのセマンティクスを考えるうえでより意味をもって表のデータを表す機能を果たします。

【定義】：表のヘッダ行を指示するHTML
『thead』は表のヘッダを表します。

theadの使用例［HTMLソースコード］

<table>
<col style="background : #cdcdcd ; ">
</col>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

theadの使用方法解説

　「thead要素」は、表におけるヘッダ行(table head)を表わします。
　「thead要素」は「colgroup要素」よりも後、「tbody要素」よりも前に記述する必要があります。必ずしも必要な要素ではなく、省略することができます。

「thead要素」内のセルはすべて「th要素」に

　「thead要素」内に入れるセル要素として、「td要素」を使ってはいけません。必ず「th要素」を使いましょう。
　なお、「thead要素」は、「table要素」内にひとつと決まっています。複数の｢thead要素」を使ってはいけません。

【定義】：表の列を指示するHTML
『col』は列を表す要素です。

colの使用例［HTMLソースコード］

<table>
<col style="background : #cdcdcd ; ">
</col>
<thead>
 <tr>
  <th>サービス</th>
  <th>内容</th>
  <th>価格</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</tbody>
</table>

colの使用方法解説

　「col要素」は、表における列(column)を表わします。
　「col要素」は、「colgroup要素」内でのみ利用できます。しかし、「colgroup要素」側で｢span属性」を指定している場合は、「col要素」を入れることはできないので注意しましょう。
　該当の列にCSSを指定すれば、列単位でのCSS指定を簡単に行なうことができます。

【定義】：表の列グループを指示するHTML
『colgroup』は列のグループ化をします。

colgroupの使用例［HTMLソースコード］

<table>
<colgroup style="background : #cdcdcd ; ">
<col>
<col>
</colgroup>
<col style="background : #efefef ;">
 <tr>
  <td>ホームページ作成</td>
  <td>ホームページの設計から作成まで全て</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>コンテンツ作成</td>
  <td>画像の加工からコンテンツの作成まで</td>
  <td>○○円～</td>
 </tr>
 <tr>
  <td>SEO対策</td>
  <td>キーワードの選定からホームページの構造設計まで</td>
  <td>○○円～</td>
 </tr>
</table>

colgroupの使用方法解説

　「colgroup要素」は、表組みの列のグループ(column group)を表わします。
　「table要素」の子要素として、「caption要素」よりも後、「thead要素」や「tbody要素よ」りも前に記述する必要があります。
　「colgroup要素」を利用することで、列のグループが明確になり、CSSによるスタイリングをシンプルかつ簡易なものにすることができます。