Affinity Designer, Affinity Photo で実務レベルのウェブ制作は可能?

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

ウェブ業界の現状

通常ウェブデザインの業界では Adobe の Photoshop と Illustrator が一般的に使われていますが、イギリスの Serif が開発した Affinity Photo, Affinity Designer などのライバル製品が登場してからは脱Adobe の道が本格的に模索されるようになってきました。

レスポンシブデザインが必須の今、制作の流れとしては Photoshop などのピクセルベースペイントツールはバナーなどの画像素材作成のみに使用し、Illustrator や Sketch App などのベクターベースのレイアウトツールを使って全体のレイアウトを組む場合が多いかと思います。

そこで、Affinity Photo、Affinity Designer を使って実際の仕事でウェブ制作を完結することができるのかについて検証してみます。

Affinity Photo

https://affinity.serif.com/ja-jp/photo/

Affinity Photo は写真加工や RAW 現像など、写真を編集する機能に特化したソフトウェアです。Mac / Windows に対応しており、執筆時点では6,000円程度で購入でき、サブスクリプションなどの継続的な支払いはありません。
Photoshop の PSD 形式ファイルの読み書きが可能で、レイヤースタイルをある程度保ったまま読み込む事ができます。
色調補正や各種ブラシもそれなりに揃っているので通常の補正で困ることはなさそうです。

RGB, CMYK の両方に対応し、HDR合成やパノラマ結合など豊富な機能があり、単体のペイントソフトとして見るなら十分にパワフルで実用的なソフトです。ドロップシャドウや光彩、境界線などのレイヤースタイルも Photoshop と同じ感覚で使えます。ただし PSD ファイルの読み込みは完全とはいえず、信用はできません。日本語テキストの一部が文字化けしたり、サテンなどのレイヤースタイルエフェクトが欠落したりします。現時点ではテキストの縦書きにも非対応なので注意が必要です。
最初からすべて Affinity Photo を使って作ったデータをもとに制作を進めるなら問題なく使えますが、他の人が Photoshop を使って作ったファイルをもとを Affinity Photo で読み込んで使うとなると互換性にやや不安があります。

Affinity Designer

https://affinity.serif.com/ja-jp/designer/

Affinity Designer はベクターベースのドローツールで、こちらも執筆時点では6,000円ほどで購入できるサブスクリプション不要の買い切り型ソフトウェアです。Mac / Windows のどちらでも利用できます。
パスツールを使ったベクターはもちろん、ピクセルペルソナに切り替えることでピクセルベースのペイントも行うことができるようになるので、無機質なシェイプにアナログブラシの質感を与えることもできます。
特筆すべきは「シンボル」で、サイト内で繰り返し使うパーツをシンボルとして定義して配置すると、シンボルの1つを書き換えるだけで他のシンボルも同様に変化します。これを使うとヘッダーやフッターなどの共通パーツの管理が楽にできます。

もう1つの長所は「制約」で、アートボードのサイズ変更に対して位置やサイズをどのように変化させるかを指定できます。常に右上に配置したいものは制約で右上に指定しておくと、アートボードのサイズが変わっても右上の状態が維持されます。レスポンシブ対応のサイトをデザインする上で有用な機能です。

「アセット」もサイト作成には便利です。矢印やメニューアイコンなどのよく使う基本図形をアセットに登録しておくと、一覧から選んで簡単に配置できます。

一応 Illustrator の AI ファイルも読み込めますが互換性に関してはこちらも完璧を期待してはいけません。
書き出しに関しては AI は無く、主要なものとしては PNG, JPEG, GIF, TIFF のほか PSD, PDF, SVG, EPS などがあります。言い換えるならベクターのレイヤー構造を維持したまま他のソフトで読み込むことのできる形式はないということです。
CMYK には対応しますが執筆時点ではテキストの縦書きやトリムマーク(トンボ)作成機能はないのでパンフレット等の印刷物を作るには向かないと思います。

まとめ

Affinity Photo も Affinity Designer も素晴らしいソフトウェアで、Adobe系ソフトとの互換性や縦書きの問題を除けば十分に仕事で使えるように思います。少なくとも低価格ペイントツールの中では Photoshop Elements や Pixelmator よりも Affinity Photo のほうが優れています。Affinity Designer に関してはウェブ用途に限っていえば Illustrator 以上の実力と言って良いと思います。
現時点では Photoshop を完全に手放すのは難しい状況ですが、Creative Cloud のフォトプランにして月々のコストを抑えつつ Illustrator の代わりに Affinity Designer を使うというあたりが現実的な落とし所ではないでしょうか。

Posted in 一般 | Leave a comment

[CSS]Transition、Animationを使ったホバーエフェクトのサンプル集

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

CSS の transition や animation が使えるようになってからは Javascript を使用しなくても手軽に動きをつけられるようになりました。
具体的にどのような動きができるのかを確認するために一般的なマウスオーバー時の変化を一覧にしてみました。

DEMO

Posted in HTML, CSS | Leave a comment

Symfony 3 のインストールと基本構成

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

この記事では Symfony 3.2 のインストールと重要なフォルダの階層、ルーティングの基本などについて説明します。

インストーラーの準備

Mac, Linux

下記のようにして Symfony のインストーラーをダウンロード、インストールします。

 $ sudo mkdir -p /usr/local/bin
 $ sudo curl -LsS https://symfony.com/installer -o /usr/local/bin/symfony
 $ sudo chmod a+x /usr/local/bin/symfony
 

プロジェクトの作成は次のようにします。my_project_name の部分はプロジェクトのフォルダ名になりますので好きな名前をつけて下さい。

$ symfony new my_project_name

Windows

Windows の場合次のようにして実行ファイルをダウンロードします。

php -r "readfile('https://symfony.com/installer');" > symfony

ダウンロードした symfony というファイルをプロジェクトのフォルダに移動し「php symfony」のようにして使います。

プロジェクトのルートフォルダに移動しプロジェクトを作成します。
my_project_name の部分はプロジェクトのフォルダ名になりますので好きな名前をつけて下さい。

C:¥> cd projects
C:¥projects¥> php symfony new my_project_name

Composer を使う

PHP のバージョンが古かったり、Symfony のインストーラーが使えない場合は Composer を使ってインストールします。

composer create-project symfony/framework-standard-edition my_project_name

インストールされる主要コンポーネント

Symfony 3 にはデータベースまわりを扱う Doctrine ORM、メール送信のための Swift Mailer、テンプレートエンジンの Twig などが予めインストールされています。

主要ファイル構成

各種設定ファイルは app/config にまとめられています。
設定は YAML 形式のファイルで保存されており、ロケールやメールサーバー情報、データベースの接続情報などはここで編集します。

コントローラーは src/AppBundle/Controller にあります。
ホームページを表示するための DefaultController.php が見本として用意されています。

テンプレートファイルは app/Resources/views にあります。
テンプレートエンジンには Twig が使われています。

パブリックフォルダの名前は web です。独自ドメインもこのフォルダに割当てます。
画像や CSS、JS などのアセットはここに配置します。

ルーティング

ルーティングの指定方法は app/config/routing.yml で変更できますが、デフォルトではコントローラーでのアノテーション(コメント)が利用されます。

	/**
     * @Route("/api/posts/{id}")
     * @Method({"GET","HEAD"})
     */
    public function showAction($id)
    {
        //
    }

それぞれのビューコントローラーのメソッドの上にアノテーションとしてルーティングを記述します。
@Route にはパスを定義します {id} のように括弧で囲むと引数として受け取れるようになります。
@Method は HTTP メソッドを指定するために使います。デフォルトでは全てのメソッドが受け入れられる状態です。
@Method("PUT") のようにすると PUT メソッドのみに反応するようにできます。複数のメソッドに対応する場合 {"GET","HEAD"} のように波括弧を用いて GET か HEAD のときにみに限定できます。
コントローラーメソッドの命名は indexAction(), showAction(), editAction() のように 役割 + Action() の形にします。

パスの書式を指定したり、ルートに名前を付ける場合は次のようにします。

/**
 * @Route("/blog/{page}", name="blog_list", requirements={"page": "\d+"})
 */

name はルートの名前です。アプリケーション全体でユニークな名前にして下さい。
名前をつけておくと URL の出力が簡単になります。
requirements は正規表現を使ったルールです。
上記の例では {page} が数字であることが条件となっています。

デバッグ

web/app_dev.php にアクセスするとデバッグモードになります。
IPアドレスによる制限がかかっているため、Vagrant を使用している場合などでアクセス元が 127.0.0.1 でない場合 app_dev.php 内の in_array() に許可する IP を追加します。

!(in_array(@$_SERVER['REMOTE_ADDR'], ['127.0.0.1', '::1'])

ビューのレンダリング

コントローラーで直接レスポンスを出力するには次のようにします。

return new Response( "Hello, World!" );

Twig テンプレートを使ってレンダリングする場合はこのようになります。

return $this->render('default/index.html.twig', ['key' => 'value']);

Twig の詳細に関しては割愛しますが render() の第1引数にテンプレートファイル名を指定し、第2引数にテンプレートに渡す変数とその内容を連想配列の形で記述します。配列のキー名がそのまま変数名として渡されます。

Posted in PHP | Tagged , | Leave a comment