Retinaディスプレイ、レスポンシブWEBが主流になった昨今、サイズの可変で劣化しないSVG形式での画像書き出しで組んでいるサイトが増えてきました。
SVGとはパスで形成されたものなので、元々はIllustratorで作って、アートボードをギリにして書き出していました。それが、Photoshop cc2014から直接photoshopのシェイプレイヤーをアセットで書き出すことが可能になりました。これによってSVG書き出しがより簡単になってきたのではないかと思っています。そこで、弊社でも毎度Retinaディスプレイ用に2倍画像も書き出すよりは、軽くて綺麗なSVGで組むことにしました。その際に起きた、トラブル、結局諦めたこととかあるのでここに記載します。

1)IE9以上対応をクライアントに確認しましょう。
html5はもちろんですが、svgが表示されるのはIE9以上なので、IE8以下は切らなければいけません。基本中の基本ですが、まずはクライアントのその旨お伝えしましょう。

2)IE11では正円が欠ける
Photoshopで書き出された正円がIllustratorのアートボードでギリだったので心配だったのですが、どうしても円の端っこが欠けてしまって、きれいな正円になりません。

・イラレで少し余白のあるアートボードで書き出す。
(photoshopでの書き出しSVGをIllustratorでどんなに編集してもギリ担ってしまうので、Illustrator始まりで書き出さないとダメだと思います。)

・正円はcss3で、中のパーツだけsvgにする。

上記方法ならば、svgのままでいけるかもしれません。スピード考えると正円のパーツはcss3の方がいいかもしれません。結局、私は全てpng書き出しで切り出しました。

3)三角アローのSVGがスマホでは表示されない。タップすると出てくる
こちらは変なバグっぽかったのですが、スマホでリンクテキストの前に設置したアロー(svg)が表示されませんでした。もう、ここはあっさりpngに戻しました。

4)svg背景100%表示がChromeでは両端が切れる。
背景にアーチ状の曲線をひいていたのですが、Chromeだけ両脇が切れてしまいます。大きめに110%指定しても切れてしまいます。しかもスマホのChromeブラウザでも同じ現象が起きます。もう、ここは完全に諦めてpngにしたら全ブラウザ大丈夫になりました。SVGのパーツを背景100%表示する時は両脇注意です。

それ以外のアイコンや欧文フォントのアウトラインなどは問題なかったので、ちょっとつづ、SVG化していこうと思っています。


株式会社夢テクノロジー 採用LPを作成しました。

株式会社夢テクノロジー様のキャリア採用LPを製作しました。レスポンシブ(スマホ対応)WEBになります。
どういった内容を載せるか?という段階からご相談を受けましたので、原稿や構成から考えて、「未経験でもITエンジニアになれる」をベースに色々なアプローチのパターンを提案しました。
最終的にはバランスよい形を採用しました。テイストは明るめで元気よく、応募しやすい雰囲気で作り上げることができたと思います。

クライアント:株式会社夢テクノロジー
担当:企画/構成/デザイン/コーディング

>> 株式会社夢テクノロジー採用LPページ
>> フラグメントのWEBサイト制作実積はこちら


夢真グループ「TRAINIG GUIDE」パンフレット

夢真グループの新卒・キャリア採用の講習用に配る「TRAINIG GUIDE」パンフレットを制作しました。
当初、LPの採用をそのまま落とし込む予定でしたが、その内容よりもボリュームを増やして制作することになったので、新たに入れ込む内容のディレクションを一からやりこみました。
今、エンジニアが不足していて、今後はますます足りなくなってしまうということ、また、エンジニアにとって未来は明るくワクワクする世界が待っているという流れをパンフレットにはめ込んでいきました。
デザインのテイストはフラットデザインで、写真など先進的イメージを使ってクールに仕上げています。

クライアント:夢真グループ/株式会社夢テクノロジー
担当:構成/デザイン/ディレクション

>> 株式会社夢テクノロジーのホームページ
>> フラグメントのWEBサイト制作実積はこちら


「標的型サイバー攻撃対策」A4チラシ

株式会社シーイーシー様の「標的型サイバー攻撃対策」のA4チラシを作成いたしました。
狙われているという恐怖心を煽るビジュアルになっています。従来の入口、出口だけでなく、内部対策が必要なのです。

クライアント:株式会社シーイーシー
担当:構成/デザイン/ディレクション

>> 株式会社シーイーシーのホームページ
>> フラグメントのWEBサイト制作実積はこちら


「公共団体向けCEC SOC」A4チラシ

株式会社シーイーシー様の「公共団体向けSOC」のA4チラシを作成いたしました。
24時間365日有人セキュリティ監視体制「CEC SOC」の各省庁のガイドラインに則した公共団体向けソリューションになります。

クライアント:株式会社シーイーシー
担当:構成/デザイン/ディレクション

>> 株式会社シーイーシーのホームページ
>> フラグメントのWEBサイト制作実積はこちら