ウェブページのコーディングについて

ウェブページのコーディングの方針と対応範囲

完成した静止画のウェブデザインはそのままではウェブページとしては機能しないため、文字はテキストとして、画像はパーツとして書き出し、HTMLやCSSを使って1ページずつコーディングをする必要があります。画面制御に関するスライダーやカルーセルなどのUI、アニメーションなどの動きはJavaScriptを用いて組んでいきます。パソコンなどのデスクトップ向けレイアウトやスマートフォンなどのモバイル向けのレイアウトは、原則ウィンドウサイズによって変化させるレシポンシブにて対応いたします。また制作レベルでの基本的なSEO対策は標準で対応いたします。

コーディングの作業には主にVisual Studio Codeを使用し、BEM方式に基づいた設計や命名を行います。Dreamweaverやホームページビルダー等のホームページ作成ソフトや自動HTML生成機能を使ったコーディングは、たくさんの不要なコードを出力するばかりか、不具合発生時の対応が困難となるため利用しませんのでご安心ください。

既存のウェブサイトのルールやガイドラインに準じたコーディング

新規ではなく既存のウェブサイトが運用されている場合、例えば代理店案件の大手企業のウェブサイトなどはすでに共通のヘッダーやフッターが用意されていることが多く、SSIやPHPなどによってサーバ側でページに読み込まれるようテンプレート管理されていることがあります。

新規でウェブサイトを構築する場合はルールやガイドラインを新たに策定するため問題ありませんが、すでに存在するウェブサイトの場合は考慮すべき点が多数あります。「サーバの仕様で特定のタグが使えず表示が崩れた」「共通で読み込まれているプログラムとバッティングして動作しなかった」「画像データは特定のフォルダにアップする必要があった」などはよくある話です。すでに一定のルールやガイドラインに基づいて設計されているため、競合しないようガイドラインに準じたコーディングを行います。

オリジナルデザインのウェブサイトを作りたい
グラフィックデザイナー向けコーディングのみの対応もいたします

コーディングの知識やスキルが無いグラフィックデザイナーのデザインデータを元にコーディングのみの対応もいたします。Photoshop / Illustrator / Figma / XDのデザインデータにて引き受け可能です。私自身PhotoshopやIllustratorを使ったデザインの実務経験があり、可能な限り支給いただいたデザインを再現できるよう努めますのでご安心ください。なおCanvaはプロ用のソフトではないため対応不可となります。

デザインをされる方のウェブデザインに対する知見や知識を確認するため、過去の実務での実績の確認やデザインデータの事前送付をお願いしています。例えばチラシやパンフレットのようなデザインデータではウェブページとして再現することができません。事前にすり合わせをしながら、できること・できないことを確認しながら進めていきます。

• カラーモードはRGBになっているか
• ピクセルを意識してデザインされているか
• 横幅いっぱいに配置された画像をウィンドウ幅でどう対応するか
• 使われているフォントはウェブフォントとして使えるのか

様々な環境で表示・動作確認をいたします

「Macで作成したウェブサイトがWindowsで確認をしたら表示が崩れた」「スマートフォンだと動作がおかしい」などの不具合が無いかどうか、コーディングをしたページを様々な環境にて表示および動作確認を行います。国内の大手企業のウェブサイトガイドラインに倣って、下記の環境を検証対象としています。近年ブラウザのアップデートが細分化しているため、原則最新版のみの確認となりますが、状況に応じて1世代前まで対応する場合があります。
※すでにサポートが終了しているInternet ExplorerやAndroid 標準ブラウザは対応不可となります。

完成後は当方でIDとパスワードを設定したpetitboys.comドメインとは別の匿名のテストサイトをご用意しますので、本番サーバへの公開前にご確認いただけます。

• Windows / Mac - Edge
• Windows / Mac - Chrome
• Windows / Mac - Firefox
• Mac - Safari
• iOS - Safari
• iPad OS - Safari
• Android - Chrome