WEB制作

WEB制作

フォトショ歴20年の筆者がAffinity Photoを代替アプリとして半年使った感想

Photoshop歴20年以上の筆者が買い切りの代替アプリとして人気のAffinity Photoを半年ほど使った感想。使ったのはMac版でおそらくWindows版にも通ずると思う。

主に『代替アプリとして使い物になるのか?』という観点から、Affinity Photo導入を迷っている子羊たちにアドバイスする。

厳しめに結論を言うと、Photoshopと操作が結構違うけど、個人用途なら8割の人が満足するはず。会社に所属していたりフリーランスでもPSDのファイルを他人とやりとりするなら、悪いこと言わないから本家Photoshopを契約した方がいい。

フォトレタッチはPhotoshopと多分同等以上

Photoshopはプロの世界では純粋なフォトレタッチツールとしてよりも、デザインツールやイラスト(お絵描き)ツールとして使われている割合が実は結構高かったりする。とりあえず、フォトレタッチ機能についてはPhotoshopと多分同等以上。

乗り換えの注意点として、インターフェースやワークフローの概念が独特な部分があり、Photoshopに慣れているからと言って一瞬で使いこなせるわけではない。Photoshopに相当する機能を探したりが最初が面倒。PhotoshopでいうスマートオブジェクトがAffinity Photoでは標準機能なので、後発なだけにPhotoshopより洗練されている部分もある。

ここで言っているのは、あくまでに個人用途のブログとかで使う画像のレタッチのことで、カラースペースとか色味に厳密なガチな商業印刷とかのレタッチに通用するかというと、それは未知数。きちんとした業務で使うならケチらずPhotoshopを契約すべき。

デザインツールとしては少し微妙

Photoshopで言うレイヤースタイルに相当する機能もあるので、Photoshopと似たようなWebで使うような画像のデザイン作業ができる気がする。

ただ、標準では日本語でありがちな縦書きに対応していなかったり、文字周りの機能が貧弱。ガチで仕事としてデザイン作業するならPhotoshopの方が効率がよいだろう。イラスト作成は他にクリスタとか専門のツールがあるので知らない。そもそもPhotoshopでイラスト作成もしないので。

PSDファイルとか他ソフトとの連携

Affinity PhotoはPSDファイルの読み込みに対応しているものの、シンプルなものしか正常に読み込めないと思った方がよい。それもそのはずで、Photoshopですら少しバージョンが違ったり環境が違うと問題が起きる類の話なので。IllustratorとかよりはずっとPSDは扱いやすいけど。

PremiereとかAfterEffectsとかIllustratorとかDreamweaverとかと、連携してシームレスに作業がしたいという人は素直にPhotoshopを使うべきだろう。というか、そういうAdobeソフトで固めている人はAdobe CCを契約しているから、Photoshopもあるか(笑)

まとめ 個人のなんちゃってWeb制作には十分かも

組織に所属していてお金をポーンと出してくれるならAdobe CC一択。まともな会社でまともな仕事をしようと思ったら、業界標準の最高のツール(ということにして)を導入して貰おう。個人的にはAdobeの株主だから、じゃんじゃんCCを契約してAdobe税を払って欲しいし。

対して、個人でなんちゃってWeb制作をしているレベルだったら、Affinity Photoで事足りる。最初は機能覚えるのがめんどいけど、まぁ慣れるレベル。個人的にはAdobeの株主だから、じゃんじゃんCCを契約してAdobe税を払って欲しいけどね。

WEB制作

Ionic 開発環境の準備手順メモ

Webデザイナー(但しプログラミングスキルwが必須)でもスマホアプリが作れるらしいフレームワーク、Ionicの開発環境を整えるまでのメモ。Ionicのとかハイブリッドアプリ系の話が出ると、よくWebデザイナーでもOK・・・って言うけど、フロントエンジニア寄りのデザイナーっていうか、意識高い系というか、明らかにお高くとまっているタイプ限定の話だから。

だって、大手ホワイト優良企業のWebデザイナーはテンプレのバナー製作と、ルーチンのテンプレHTML更新くらいしかしないもんね!! それで年収1千万貰えるし(嘘)

現場的なことを言うと、ガチ年収1千万のプログラマーが別に在籍してるから、素人のWebデザイナーがプログラミングなんてする機会ないんだもん、と正論で開き直っても仕方ないので、渋々メモしていくぞ。

IonicはAndroid Studioみたいに入れればポーンっと自動設定されたりしないので、手順通り作業する。メモしてあれだが、将来、バージョン変わったりするとこの通りいかなくなるだろう。

参考書籍

Node.jsをインストール

ターミナル(Winはコマンドプロンプト)で下記コマンドを入力。

node-v

バージョンなどが表示されるとすでにインストール済みだが、プログラミングしないWebデザイナーは公式サイトから別途インストールしないとならない。

解説するとNode.jsはJavascript開発のなんか。

Macではターミナル、Windowsではコマンドプロンプトという黒い画面のアレを使った作業。というか、宗教上の理由でハイブリッドアプリと言えど、MacじゃないとiOSアプリは作れないので注意が必要。勉強だけだったらWindowsでもいいし、世界のスマホの85%のAndroidだけ開発できれば十分、という人もWindowsでもいい。

日本のカ自分ら高みにいますよ、みたいなiOSユーザーにもアプリを提供したい場合は遅かれ早かれ、Macを買うしか道がない。

Ionic CLIをインストール

Ionicのコマンドを動かすことができるようなやつ。

Maaの場合
sudo npm install ionic -g

Windowsの場合
npm install ionic -g

インストール完了したら
ionic -v
と入力してバージョンが表示されたら成功。

Gitをインストール

これもプログラミングをしない芸術家寄りのWebデザイナーには使うことがないが、IonicではGitを使ってバージョン管理したりするのでインストールする。

MacでXcodeをインストール済みの場合はすでに入っているはず。

git –version
で調べられる。

入っていない場合、これも時代によってやり方が変わるが、公式サイトなど調べてインストールしよう。

その他、必要なツール

Macの場合
・Xcode

Windows、Mac共通で
・Android Studio
・Visualstudio code
拡張機能でAngular Langage serviceを入れる

ここまででツール類は準備完了。

開発を始めるためのセットアップ

デスクトップなりに開発用のフォルダを作る。仮にionicという名前にする。

ターミナルでもコマンドプロンプトでも
cd
というコマンドを入れるとカレントディレクトリに移動するが、

cd と入れたら先ほどのionicフォルダをターミナルにドラッグすると、そこのフォルダに操作対象が移動される。

次に下記コマンドを入れる。

ionic start –type=angular

設定がうまくできていてインストール手順などが変わっていなければ、チュートリアル用のファイル類がフォルダに作られるはず。とりあえず準備完了。

WEB制作

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

現場では上の偉い担当者がレスポンシブとダイナミックサーベイの違いをわかっていないケースがあるので解説してみる。

どちらも一つの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サイトその他、大規模で複雑な企業運営のサイトはこっちの方式が実務では多い。