WEB制作

WEB制作

WebデザイナーがiOSネイティブアプリ開発に挑戦して学んだことメモ

人類(というか自分)の大きな進歩についての感動を共有。

iOSネイティブアプリがシミュレーター&実機で動作するまでの取り組み。主にWebデザイナーから範囲広げたり、なんとなく学習考えている人向けの共有。

前提スペック

・某大手企業勤務程度のWebデザイナー
・HTML、CSS、CMS業務レベル

取り組んだこと

・MacBookAir2020でXcode(Swift)を使って、iOSネイティブアプリの開発
・シミュレータとローカルの実機で、何となく動作させるまで(iPad)
大変だったこと
・全部英語w
・Appleは互換性を大事にしてそうな気がしたけど、実際は数ヶ月くらい?のハイペースでコロッコロ仕様を変えてやがる。参考書やWebの情報が少し古いだけで、あまり役に立たない
・XcodeやSwiftにもバージョンがあって、コロッコロ変わる
・環境構築が思いのほか、難しくて大変すぎる。1日仕事どころじゃない

意外だったこと

・画面のデザインはCSSとかでやると思ってたけど、ネイティブアプリ開発にCSSなんて全く登場しない(たぶん)
・アップル独自(swift)方式?みたいなパラメータでデザインする
・パワポで資料作るイメージ(パワポよりは難しい)
・細かく機種ごとの見え方の調整するのは、かなり難しそうで未学習

プログラミング(Swift)

・初歩レベルであれば、HTMLとかでコーディングしているイメージとそんなに変わらない。調べながらやれば何とかなる(たぶん)
・HTMLやCSSで格闘した経験は、RPGで言うと「二刀流」スキルを初めから持っている「強くてニューゲーム」な状態で有利
・やってみるとWebデザインより、世の中的に旬だし色々できそうで楽しい

似た境遇の人へのアドバイス

参考書選びが大事。2~3年前のものでもバージョンダウンさせないと動作しない。できるだけ最新のやつが早道。

WEB制作

アメブロなど無料ブログの大きなデメリットとWordPress乗り換えのメリット

HTMLなど知識がないorあまりない一般個人がブログを運営するとしたら、アメーバブログやnoteをはじめとした無料ブログがまず検討対象になるだろう。

昨今はツイッターやFacebokをはじめとしたSNSがブログ的に手軽に利用できることから、情報発信のためにブログを立ち上げるという行為自体が以前よりは少なくなってきている。その証拠に13年以上の歴史があったYahoo!ブログは2019年にサービス終了している。老舗ブログサービスが終了していることからも、ブログ自体の利用者が低迷していると言えるだろう。

だが、そんな世間的な状況下でもブログを立ち上げたり運営したいと思っているなら、アメーバブログとかよりもWordPressで自前で立ち上げた方がメリットが大きいと考える。その理由を比較しながら下記に述べたい。

アメブロ、noteなど企業のサービスを使う搾取される

これが一番大きい。あなたが少なくない時間や労力を使って記事を書いても、アメブロを運営するサイバーエージェントや、その他のブログサービス運営企業に搾取されるのだ。

どういうことかというと、企業がサーバー代やデザインなどのテンプレートを用意するお金を用意してまでブログサービスを無料で運営するということは、それ以上に金額的なメリットが見込めるからである。利用者が記事が書くと、その記事にアクセスがあった時にブログサービスが用意した広告が表示される。無料ブログの場合は無料で使えることの引き換えに、こうした広告は外せないのが通例。

むしろ、ブログサービスによってはデカデカと不快な広告だらけになってしまうことがある。こうした広告を表示させることが、あなたが無料でブログサービスを利用できる理由に他ならない。

下記で述べるWordPressなどの自前ブログなら、広告が自動で掲載されることなどないし、広告一切なしやアフィリエイトを使いたければ自分で好きな広告を貼ることができる。記事に関連した商品を紹介したりもでき、ちょっとした収入にすることができるので記事を書くモチベーションも保ちやすい。

おさらい WordPressとは

ブログ立ち上げ系の記事などでよく耳にするWordPressという単語。なんとなく知っている人もいるかもしれないがおさらいしておこう。

WordPressはオープンソース、つまり無料で使えるブログやサイト運営をするためのCMS(コンテンツマネジメントシステム)というソフトウェア。

ソフトウェアと言っても自分のPCに入れたりするわけではなく、インターネット上のレンタルサーバーというスペースにインストールして使うのが一般的。というと、すごく設定が難しいように思うかもしれないが、日本でも海外でもポピュラーなCMSなので、多くの場合はレンタルサーバーを契約すると自動的にWordPressをインストールする機能があったりする。サーバー会社によっても違うが、WordPress簡単インストールとか、そういった名前の機能だ。

つまり、始め方としてはWordPressはそうした機能があるレンタルサーバーさえ契約すれば、初心者でも何の問題もなく始められる。

使用方法も至って簡単。むしろ企業が運営するブログサービスが色々な独自の仕組みをとっていて、デザインやブログの構造に制限があるのと違って、WordPressはその人のスキル次第で自由にできる。もちろん、深くカスタマイズするにはHTMLやCSS、JS、PHP、データベースなどの知識が必要だが、それらを勉強しながらであれば何でもできるのがWordPressのメリットの一つなのだ。

WordPressを使う計り知れないメリット

あなたがどういう目的でブログを立ち上げたり運営しているかにもよるが、多くの場合は無料ブログを使う場合よりもはるかにメリットがある。以下が無料ブログと比較した場合のメリットである。

・広告が一切表示されない
・むしろ好きな広告を貼れる
・デザインやブログの構造を好きにいじれる(スキル次第)
・無料ブログサービスで避けられない急なサービス終了、変更がない
・ドメインを取得すればより「自分の運営メディア」にできる

レンタルサーバーを契約したり初期設定の手間は多少あるが、WordPressを使うのは無料ブログを使える程度のPCスキルがあれば対応可能なので、せっかく今の時代にブログをやるならWordPressがオススメなのである。

レンタルサーバーの例

安いものだと1年程度の契約で1万円程度から。WordPressが動く無料サーバーもたまにあったりするが、過去に使ったことはあるものの、動作が不安定だったりサポートがないに等しいので、安くても良いので有料サーバーを使うことを強くオススメする。

・ロリポップ
低価格で簡単にWordPressをインストールする機能もあり。歴史のあるサービスなので品質も一般的なブログでは全く問題なく快適。


・ムームードメイン
運営会社がロリポップと同じなので設定が簡単。ドメインを取りたい場合はこちらがオススメ。


WEB制作

【MFI】ド素人でもわかる! レスポンシブとダイナミックサーベイの違い

モバイルファーストインデックスが強化されるので、よくわかっていない企業の非Webエンジニア、非Webデザイナーみたいな企業の担当者がレスポンシブとダイナミックサーベイの違いをわかっていないケースがあるので、素人にもわかりやすいように解説してみる。

どちらも一つのWebサイト、WebページをPCとスマホの画面幅に対応させる手法だが、かなり使われている技術や方向性が違う。

レスポンシブWebデザインとは

まずはわかったつもりのレスポンシブから。よくわかっていない担当者が何となくわかったつもりになっているスマホ対応やモバイルファーストインデックス対応がレスポンシブだろう。

正しくはレスポンシブWebデザインという。Webデザインという言葉の通り、デザイナー的にアプローチ方法。

URLの例としては
https://bicyclist.info/
みたいにホントにPCもスマホも全く同じURLで、内部的にもPC用とSP用のHTMLが別々にあるわけではない。

Webページというのは、現実的な最低限的にはHTMLとCSSという2つのファイルで構成されている。補足すると、ブログやCMSなんかの場合はPHPなどのプログラムやデータベースの情報から表示されたりするけど、あくまでWebブラウザが表示するのはHTMLに書き出したもののみ。

一つのURLに対して、HTMLは単一のまま、CSSというデザインを記述したファイルの記述の仕方でPCやスマホ、さらにタブレットPCなどの中間を含めたあらゆるデバイスに対応させる手法。デバイスの種類ではなくて画面幅を認識させてデザインされているのが特徴。

まぁ、GoogleがSEO的に一押しにしているけど、実務的には複雑な作りになったり、メンテナンスに難があったり、サイトによっては向かない場合もある。個人のサイトなど小規模な場合や、ブログ、LPなんかはレスポンシブが向く場合が多い。

ダイナミックサーベイ(動的配信)とは

なんちゃってWeb担当者の中にはレスポンシブと混同して区別付かない困った人もいる。

個人で手打ちで作った静的なサイトだと、よくPCとSPそれぞれのページを作ってJSとかでユーザーエージェントを読み取って分岐させたするね。

https://test.info/pc/
https://test.info/SP/

これだと完全に別々のページとしてHTMLが存在するので、適切にそれをGoogleに伝えないとよろしくない場合がある。まぁ、個人のページだとそこまで致命的にならなかったりもするが。

それに対してダイナミックサーベイはサーバー側の処理(.htaccess)の、同じURLにアクセスした時にユーザーエージェントで判断して、PCとSPで返すHTMLを別々にしている。企業が運営する大規模、複雑なサイトなどに多い。HTMLが違うということはCSSも違うわけで、ページそのものが別物ということである。

Googleのクローラーから見た時も1つのURLにしか見えず、SP用だけ拾うことことになる。PC用とSP用で内容を大きく変えている場合は注意が必要だったりする。サーバーのシステム的な記述で処理してまで実現しているということなので、多くの場合はPCとSPそれぞれが極限まで最適化されている場合が多いだろう。

まとめ ダイナミックサーベイも実務ではよく使われている

単一URLだからと言っても、レスポンシブとダイナミックサーベイの存在し、その違いがよくわかったと思うが、まとめると下記のようになる。

・レスポンシブ
Google推奨方式。
デザイナー的手法でCSSの記述を使い、デバイスの画面幅でPC、SP、中間デバイスに対応。

・ダイナミックサーベイ
一応Googleが認めてはいる方式(昔?)
サーバー、エンジニア的手法で、単一URLでありながら、PCとSPで別々のHTML、CSSを返す。
ECサイトその他、大規模で複雑な企業運営のサイトはこっちの方式が実務では多い。