【改訂版】iPadでホームページを制作する方法

スポンサーリンク

専業ブロガーのかわんです。

数年前にフリーランスでWebデザイナーをしていたことがあります。

今は趣味でやってますけどね。たまにやると楽しいです。

さて、今日はiPadでホームページを制作する方法です。

大まかにはこんな感じになります。

  1. ワイヤーフレームを制作
  2. HTML/CSSコーディング
  3. 表示確認
  4. 公開

それでは1つずつ解説していきますね。

1.ワイヤーフレームを制作

基本的に、ノートとペンがあればOK。特に必要なものはありません。

それが嫌だという場合は、Adobe Compを使えばOKです。

僕は、Adobe Compを使っています。いちいちノートに書くのが嫌なので(笑)

2.HTML/CSSコーディング

CSSフレームワークのBootstrapを使ってHTML/CSSコーディングを行います。

HTMLは結構書きますが、CSSについてはちょっとだけ書けばOK。

かなり作業時間が少なくなります。

なお、アプリはTextastic Code Editor 7を使います。

以前はCoda iOSを使っていたのですが、バグらしき動作をする時があります。

それは、プレビューした時にCSSが全く効かない状態で表示されることがあり、CSSへのパスが悪いのかアプリが悪いのか分からない時があります。

その点、Textastic Code Editor 7はそのようなこともないですし、便利良く使えております。

ただ、Textastic Code Editor 7はそこそこ価格が高いです。本気でiPadでホームページを制作したい方向けです。

3.表示確認

個人的な感想なのですが、まずはメインで表示する端末できちんと表示されているかどうか確認しましょう。

僕の場合だったら、iPadでおかしな表示になっていないか確認します。

それで問題が無ければスマホで表示させた時におかしくなっていないか確認します。

なぜ、パソコンで確認しないのか?

その理由は簡単でパソコンを持っていないからです(笑)。

なので、iPadとスマホで確認するしかないんです。

ただ、上で書いたBootstrapを使うので表示が大きく異なる事は無いかと思っています。

4.公開

上の3つを無事に終えたらサーバにアップします。ここでもiPadやスマホで表示がおかしくないか軽く確認します。

ペライチだと3時間ほどで完成出来る

容量にもよりますが、ペライチのホームページであれば3時間ほどで完了させる事が出来ます。

これは速いのか遅いのか分かりませんが、1からHTMLやCSSを書くより大幅に時短出来ていると思っています。

上でも書いたようにHTMLは結構書きますが、CSSはチョロっと書くだけでOK。とても簡単です。

まとめ

iPadで手軽にホームページを作れるのは便利です。

ただ、HTMLやCSSを書く時、iPadのソフトウェアキーボードでは無理があるのでBluetoothキーボードを用意しましょう。

ホームページはパソコンが無くても制作出来る。

それを肌で感じて欲しいです。