ウェブサイトは、デザインを作ったら、次の工程でただちにウェブサイトが完成するわけではありません。
順序として、まず見た目のデザインを作り、そのあと実際にウェブ上で表示できる形に元のデザインを変換します。このウェブで表示できる状態にする工程が「デザインをHTMLにする」です。詳細を知らない方にとっては、全く想像がつきづらい工程です。
そのため、デザインが出来上がったらすぐに納品できると思い込んでスケジュールを立ててしまうと、公開日が遅れたり、間に合わせのための粗悪なHTMLになったりと、要らぬトラブルが出てきてしまいます。
「デザインをHTMLにする」とは、デザイン画として作られた見た目を、ウェブサイトとして表示できる形に変えることです。デザインはウェブサイト上で、テキストやボタンや写真がどの位置にどのぐらいの面積で配置されるか等を示した、設計図のようなものです。
出力してしまえばただの1枚の画像で、そのままではウェブサイトとしては働きません。HTMLという仕組みを使うことで、文字や写真、レイアウトが実際のサイトとして表示されるようになります。
HTMLに変換することで、注目させたい文章をふわっと表示させてたり、スライドショーのアニメーションをしたり、リンクをクリックしたりできるようになります。利用者が実際に操作できる状態にするために、デザインをHTMLに変換する作業が必要になります。
これはサイト制作の中で欠かせない工程です。HTMLにしなかったら（HTML化をしなかったら）、そもそもウェブサイトとしての表示ができません。
まずはデザインとして、詳細まで詰めた画面があります。次にそのデザインをもとに、HTMLを使ってページを組み立てます。1枚画像のデザインを、文書、画像、ボタンなどに分解して、各パーツをHTMLという言語で置き換えていくようなイメージです。
HTMLであらためてこの文字はどのぐらいの文字サイズか、あるいは色か。この画像はPCではどのぐらいの面積で表示して、スマートフォンではどのぐらいの大きさに抑えるか、マウスカーソルを当てた時の挙動はどうするか、などを１つ１つ設定していきます。この工程でデザインが1枚の画像から、ブラウザーを介して表示できるウェブサイトへと生まれ変わります。
最後に、パソコンやスマートフォンで正しく表示されるかを確認します。以上の流れでサイトが完成します。
大学サイトでも、他の業界のサイトであっても、ほぼすべてのウェブサイトは正確な情報を分かりやすく伝えることが求められます。デザインをHTMLにする際に、文字の読みやすさやスマホでの見やすさも考えます。ここを丁寧に行うことで、大学サイトでは受験生や保護者が安心して利用できるサイトになります。見た目と使いやすさをつなぐ大切な作業です。
例えばマウスカーソルとリンクの上に載せたら、下線がついたり、テキストの色が変わったりします。こういった動作は注意喚起の意味もあり、１つ１つは細かく見えるこれらの設定の積み重ねが、より使いやすい、ウェブサイトの豊かな体験へとつながります。
デザインをHTMLにするとは、見た目のデザインを実際に使えるウェブサイトに変えることです。この作業を通して、多くの人がブラウザー越しにウェブサイトを利用できる形になります。ウェブ制作においては必須の作業なのです。
