株式会社エムアップホールディングス

デザイナーのヨコスカです。

最近web制作の依頼の中で、レスポンシブデザインやRetina（高解像度）ディスプレイに
対応して欲しいとの要望が増えてきましたが、
画像を綺麗に見せるためにはPCとSP用で画像を出し分けたり、表示サイズより大きい画像を用意したりする必要があるなど、
最適な画像の選択は制作者にとってなかなか悩み深いポイントになります。

そこで今回はそんな悩みを解消するべく、拡大・縮小をしても画質を保持するSVGの作成から
webページへの導入までを紹介したいと思います。

【ところでSVGって何？】
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）を略してSVGと呼ばれています。
XMLをベースにしたベクターデータを表示する技術です。

ベクターデータとは、Illustratorなどで扱う画像を数値データをもとにして演算によって再現する方式で、
描画の度に再計算しているので拡大・縮小しても画質が劣化せず綺麗に表示できる性質があります。

簡単に言うと、JPEGやPNGのような画像（ビットマップデータ）は元画像を拡大して表示すると”もやっ”っとなってしまいますが　、
ベクターデータはどんなサイズで表示しても”もやっ”と感なく滑らかくっきり綺麗なまま表示できるのです。



SVG自体は結構前からある技術ですが、対応するブラウザが限られていたことや、
CPUなどの性能が劣るデバイスではレンダリング速度が遅くなる可能性があるなどデメリットもあり
普及がいまいちでした。
しかし、最近ではブラウザのサポート範囲も広がり、
表示パフォーマンスについてもPCやスマホの端末の性能が上がってきているので、
かなり実用性が高くなり一般的になってきました。

【対応ブラウザ】
・Internet Explorer 9以上
・Firefox 3.0以上
・Chrome 4.0以上
・Mac OS X Safari 3.2以上
・Opera 9.0以上
・iOS Safari 3.2以上
・Android 3.0以上
※このように最近のモダンブラウザにはほとんど対応しています。

◇◇◇◇　作成方法　◇◇◇◇

意外と簡単です。
①まずはIllustratorでSVGにしたい画像を用意します。
※webフォントと違い複数の色を使えます。

②余計な余白も書き出されてしまうのでアートボードをオブジェクトサイズに合わせます。
[オブジェクト] → [アートボード] → [オブジェクト全体に合わせる]
これで、自動的にぴったりのアートボードが作成されます。
最初にサイズを決めてオブジェクトのサイズをあわせてもいいです。



③ファイル形式をSVGで保存します。



※細かい設定は省略します。
※svgzとは圧縮SVGのことです。よりファイルが軽量になります。

これで作成は終了です。簡単でした。

注意点としては、
・写真のような複雑なオブジェクトには向いていません。
・データはアウトラインをかけましょう
・レイヤー名がID名になりますので後で操作する場合はわかりやすいものを付けておくといいです。


◇◇◇◇　設置方法　◇◇◇◇

実装方法はいくつかありますが簡単なのは画像のようにimgタグを使用する形式です。

・img要素で配置
・objectタグで設置
・CSSの背景画像で指定
・HTML中にインラインで使用
インラインで使用する場合、Illustratorで保存する際に【SVGコード】ボタンを押すと
下記のようなソースが生成されます。
これをhtmlに記述することで画像を表示します。



こんな感じでhtmlとCSSで調整することで一つのデータでいろいろな表現が可能になります。


・縮小
・拡大
・アニメーション
・グラデーション
・ドロップシャドウ
・ぼかし
などなど、、、

これで自由自在に拡大・縮小できる画像ができました。高解像度ディスプレイも怖くないですね。
SVGはCSS3(animationCSS)やJavaScriptを使ってアニメーションや
色々なフィルター効果やエフェクトもかけられるので、
使い方によってデザインの表現が広がるとてもナイスな技術です。
今回は基本の導入部分だけですが、機会があればを応用編を紹介したいと思います。

ちいさなところからですが、より良いサイト制作ができるよう色々な技術を取り入れていければと思っています。

皆様初めまして！！

コンテンツ事業本部の村澤と申します！

軽く自己紹介させて頂きますと趣味はアニメ！ファッション！ライブ！この３つで私という人間はほぼ完成されてます！！
そんな趣味の中でずっと行きたかったイベントに行ってきました！！！

それは、東京ビッグサイトにて行われました、「AnimeJapan 2017」です！！！

AnimeJapanはアニメをもっと好きになりたい！アニメを好きになるきっかけがここにはある！！
そんな思いから2014年から始まったアニメやコンテンツなどを紹介する総合イベントです！
そして、今年は日本でアニメが誕生して100年の節目の年！！過去最大規模での開催となりました！

ということで入社初のスタッフダイアリーはAnimeJapan のレポートになります！

「（前半）」というタイトル通り、内容がボリューミーになっていますので2部で書かせていただきます！

心躍らせ私がAnimeJapanに行ったのは1日目の3月25日です！
（AnimeJapanは3月25～26日の2日間で開催されました）



まず私、ビックサイトに行くこと自体が初めてでした！
とにかく広い！興奮のあまり謎のポージングになってしまいました！


そして今回のAnimeJapan実はテレビ東京さんのブースで当社もお力添えさせていただきました！！！

こちらです！！
テレビ東京ブース



当社とテレビ東京さんとで、現在開発中のあにてれを紹介しました！

あにてれは、アニメファンの「見たい！読みたい！」にこたえる。あにてれなら、いつでもアニメといっしょ。
というコンセプトの基、テレビ東京さんのアニメが見放題！！
そして、あにてれでしか見れないオリジナルコンテンツやオリジナルグッズのプレゼントなど素敵な特典盛りだくさんの
PC･スマートフォン・タブレット端末対応の動画・情報配信サービスです！
また、アニメイベントの先行予約や上映イベントのご招待も行います！！
（４月６日には「おそ松さん 春の全国大センバツ上映祭」のご招待も！！！）

詳しい詳細はコチラ！！！
https://campaign.ani.tv/

当社の田口を初め皆さんブースを盛り上げるために活躍していました！お疲れ様です！！
（田口もすっかりフレンズ顔ですね！！！）



ブースであにてれの事前登録をした方に「おそ松さん」、「けものフレンズ」のあにてれ特製缶バッジを
大人気アニメけものフレンズのコスプレをしたお姉さん達がプレゼントしていました！！
（私も登録しておそ松さんを頂きました！！！）
テレビ東京さんのイメージキャラクター、ナナナも駆け付けてくれたり、けものフレンズのコスプレもとっても可愛くてお似合いでした！
（私もフレンズの仲間に入りたい！！！）

あにてれのサービス開始は4月1日（土）からとなっています！
事前登録に間に合わなかった、、、という方でも大丈夫です！！
なんと！4月に入会した方には２ヶ月間無料視聴！！！もしくはあにてれ×人気タイトルコラボのモバイルバッテリーどちらかをプレゼントさせていただく素敵なキャンペーンを開催しちゃいます！！
（私はおそ松さんが欲しいです！！）

入会はコチラ！！！
https://campaign.ani.tv/



またテレビ東京さんでは現在放送中＆4月から放送予定のアニメのフォトスポットコーナーもありました！
（ポージングが相変わらず定まらずすみません。。。。）
個人的に「BORUTO-ボルト- NARUTO NEXT GENERATIONS」が凄く楽しみです！！
ぜひ、みなさんもご覧になって下さい！

以上のように私もテレビ東京さんのブースでPRをしっかりと行ってきました！！
実はもう一つ当社でお力添えさせていただいたブースがあるのですがそれは次回書かせていただきます！！


そしてここからはフレンズの皆様の素敵なお写真です！



私もフレンズになりたかったので一緒にお写真を撮らせていただきました！！
（これで私もフレンズの仲間入り！！）
※私の表情へのクレームは当社では一切受け付けておりません。。。




当社の加藤もフレンズの仲間入り！！！！
（ポーズまで完璧ですね！！！）



みんなはあにてれが大好きなフレンズなんだね！！わーい！
（調子乗ってフレンズ語ですみません、、、）


写真で見ても分かるように皆さん素敵なフレンズになっていました！！！！

次回も、AnimeJapanの魅力を伝えていきたいと思います！近日公開予定の「AnimeJapan 2017（後半）！！」の記事を期待してお待ちいただければ幸いです！！！！

以上！AnimeJapan 2017（前半）のレポートになります！








！！！！！！！？？？？？？？

皆さん、初めまして！
2月より入社致しました、マーケティング事業部・新規事業推進課のカカズと申します。
どうぞよろしくお願い致します。

エムアップに入社する前は旅行代理店やファッション関係の会社で働いており、
この度の転職で初めてエンタメ業界に飛び込みました。

入社して１ヵ月のド新人のわたくしですが、この短い期間で本当に様々な業務に携わる機会をもらっています。
現在、新規事業推進課で運営させていただているファンクラブサイトの更新業務をはじめ、
担当アーティストやアイドルのイベントで取材を行ったり、
社内スタジオでのWEBラジオ収録や写真撮影など･･･楽しい＆忙しい日々を送っております。

そんな中、先日カメラマンとしてとある撮影に参加してきました！
それは･･･
2/20(月)にオープンした、声優アーティスト・中島愛さんのモバイルファンクラブのカレンダー撮影です！
中島愛モバイルファンクラブ“LOVE with YOU”
https://sp.nakajimamegumifc.com/

ご存知の方も多いと思いますが、中島愛さんはマクロスFのランカ・リーや、
ハピネスチャージプリキュア！のキュアラブリーなど多くのキャラクターボイスを担当していらっしゃる声優さんです。
アーティストとしても活躍しており、2/15にはアニメ｢夏風｣のEDテーマでもある｢ワタシノセカイ｣を発売されています。

都内のハウススタジオを貸し切って、2017年3月のカレンダーを撮影しました！

ご本人やマネージャーさんの意見はもちろん、現場のスタイリストさんやメイクさん含め全員でより良いカレンダーにするためアイデアを出していきます。
そして撮影は無事終了。みなさんお疲れ様でした！

今回撮影したカレンダーは、中島愛オフィシャルファンクラブ“LOVE with YOU”にて、3月1日より会員限定配信中です！

“LOVE with YOU”では、中島愛最新情報はもちろん、本人からプライベートメールが届く｢チョクメ！｣機能、
そしてこのFCサイトだけでしか聞けないWEBラジオなどをご用意しております。
ファンにはたまらないコンテンツが満載ですので、ご興味のある方は是非のぞいてみてください。
これからも充実したサービスやコンテンツを皆さんにたくさんお届けできるよう頑張ってまいりますので、
今後ともどうぞよろしくお願い致します！

こんにちは！
ＦＣ事業本部のヨシヤスです。

最近、スーパー銭湯アイドルとして注目を浴びている
5人組グループ”純烈”
そんな彼らが3月14日（火）に新曲をリリースし、
そのリリースイベントが各地で行われるという事で
豊洲ららぽーとと渋谷HMV&BOOKS TOKYOに取材に行ってきました！





当日は、あいにくの雨模様…
どうやらメンバーに雨男がいるとかいないとか（苦笑）
でもそんな事は問題ない！と言わんばかりに平日にも関わらずたくさんの方が会場に来てくれていました。
この日は、新曲を含めたミニライブを披露。
そして当日CD購入者を対象に、握手 or メンバーと記念写真　or サインなど
スペシャルな内容となっておりました。
しかもサービスがハンパじゃないんです！
こちらの記事（毎日新聞掲載記事）のようにこの距離感！
この近さとメンバーの優しさにもう皆さんメロメロなんです。


そんな純烈の新曲
「愛でしばりたい」



なんですが……なんと……！！



＜オリコンランキング＞
デイリーチャート　第１位
総合ウイークリーチャート 第５位
演歌歌謡曲ウイークリーチャート 第１位



を獲得しました！！
新聞の一面にもこんなにドーーーンと！！！



嬉しすぎて思わず社内の壁に貼らせて頂きました（笑）

そんな純烈のデビューからの目標は、
『紅白出場と親孝行』

是非、その夢が叶ってほしいです。
モバイルファンクラブもこれからも一緒に夢を追いかけながら、
いろんなメンバーの魅力を配信していこうと思っています！

こんにちは。


総務経理部のてらしまです。


昨年よりスタートしております、
エムアップの新制度、“ランチdeトーク”ですが、
今年も開催しております！


■新制度紹介のブログはこちら☆

■昨年のランチdeトーク開催の様子はこちら☆


ランチdeトーク開催前はいつも誰を誘おうかな～と
悩みに悩み抜くわたくしですが、
もうひとつ悩むことが・・・

そう、お店選びです。

今回はどんなお肉料理にしよう・・・（前回はとんかつでした！）と悩んでおりましたところ、
発見したのが会社より徒歩5分圏内のステーキランチの食べれるお店。

※決してお肉のお店でないといけないわけではございません
※お肉ダイスキな私の独断の選定です


参加メンバー選定・お店選びはどちらも悩むところではありますが、
楽しめるところでもあり、ランチdeトークの幹事特権でもあるなぁと思っております。


そんなこんなで悩み抜いた結果、食べれることになった今回のお肉はこちらです！


130ｇハラミステーキ！！


ボリュームにびっくり！300ｇステーキ！！！


そしてみなさま・・・おわかり頂けますでしょうか・・・
鉄板の端に乗っている丸い鉄のかたまりが・・・
そうです、こちらのアツ～く熱されたところで、
レア焼きのお肉を自分でジュうっっと好みの焼き加減にしてから食するのです。

これは完全に私的ステキポイントでウットリ…

お昼からお肉ががっつり食べられるなんて、
幸せの限りですね。
午後のお仕事も頑張れます！！！

もちろんみんなで美味しく完食。

ごちそうさまでした！


そして、もちろんお肉レポートだけでは終わりません。

今回ご参加頂いたメンバーの皆さまをご紹介いたします！



タケウチさん・ヨシダさん




クルシマさん・お肉を抱えるテラシマ・バンノさん



もちろんこのメンバーは初めての組み合わせだったのですが、
こうしてお昼の時間を共に過ごすことで、
お互いの知らなかった一面をたくさん知ることができました。

今仕事ではこんなことやっているんだよ～

とか・・・

プライベートではこういうことをしていて～

など・・・

仕事に関する情報交換が出来ただけでなく、
みなさんの新たな・そして意外な一面が発見できたランチdeトークになりました。

ちなみに、今回ご参加頂いたみなさんから見た、
私の意外な一面は“ニンジンが苦手なこと”でした。

今回のステーキに添えられていたニンジンを眺めながら眉間に皺を寄せる私に、
みなさんからは、好き嫌いしないで食べないと～！とのごもっともなご指摘が…笑

ちゃんと食べられるようにならなくては。と、小さな決意をした瞬間でした。笑



いろんな話で盛り上がりつつ、
次回は夜に飲みにでも行きたいですよね！笑
と楽しい余韻を残して、今回のランチdeトークも無事に終了です！


※バンノさんが撮影してくださいました！ありがとうございます(;_:)



今回も普段仕事中にはあまり関わらない部署の方々と交流ができて、
とても充実した、楽しいランチタイムを過ごすことができました。

これは毎回思うところではありますが、ランチdeトークの良いところのヒトツです！

もちろんそれだけではなく、
社内の交流の輪が広がることは、仕事にも良い影響をもたらしてくれます。

社会人になってからより一層思うことではありますが、
たくさんの人とコミュニケーションを取りつつ仕事を進めることは、
とても重要でもあり、実は難しい部分でもあると思っています。

ランチdeトークは、普段の業務の中で関わりの少ない方々との交流もできるため、
新たなコミュニケーションを生むきっかけにも一役買っているかもしれません・・・！

来月より新卒の方々も入社されるので、
次回はそんなキラキラ☆フレッシュな新卒を交えてランチdeトークを実施できればな～と
こっそりと計画を進めようとしている私なのでした。

今後も機会がありましたら、
こちらのブログでランチdeトークの模様をお伝えできるかと思いますので、
どうぞお楽しみに♪