PowerCMS ブログ

4月22日に、「黒野明子の Photoshop & Illustrator による効率的 Web デザイン講座」という、中級者向けの講座に参加してきました。

Photoshop や Illustrator の操作を使うなかで、もう少し効率よくおこなえないかと考えていました。日々の業務と並行して新機能を勉強することが難しく、この機会に自分のものにしたいと思い参加しました。

セミナー概要

  1. セミナー名:「黒野明子の Photoshop & Illustrator による効率的 Web デザイン講座」
  2. 講師:黒野明子氏
  3. 日時:2017年4月22日 11:00~18:00(1時間ランチ休憩)
  4. 場所:JUSO Coworking
  5. 備考:PC 持込によるハンズオン形式

【Photoshop】

  • 検索機能の強化
  • OpenType SVG フォント
  • 顔立ちの調整
  • [選択とマスク]機能
  • 属性パネルの強化
  • アートボード
  • Creative Cloud Libraries
  • 新規ガイドレイアウト
  • 新しい画像の書き出し

【Illustrator】

  • [ピクセルグリッドに整合機能]の刷新
  • テキストエリアのオートフィル
  • フォントのライブプレビュー
  • 異体字の選択や特殊文字の挿入
  • アセットの書き出し
  • Creative Cloud Libraries

まず冒頭に、Adobe Creative Cloud の新機能について、Photoshop と Illustrator の説明がありました。

そのなかで私は、「検索機能の強化」が一番実務に役立つツールと感じました。
Adobe Stock 内にある画像を Photoshop の画面上で、検索ができイメージ画像を楽に探せるようになりました。

アプリ紹介

アプリと連係した、ワークフロー例についても学びました。
実際手を動かしながら Adobe が配信しているモバイルアプリのうち、特に4つを使用して学びました。

  • Adobe Comp CC
  • Adobe Capture CC
  • Adobe Preview CC
  • Adobe Photoshop Sketch

Adobe Comp CC

書き方がわからない場合は、描画ジェスチャーのヘルプに種類別に説明がされています。

グリッドの設定をし、iPhone や iPad に手描きのジェスチャーをすることで、画像やテキストが挿入できるオブジェクトに変換されます。少し形が崩れた四角や丸でも、キレイな形に変換してくれるので簡単に描くことができます。

その場で撮影した写真や Adobe Stock からも画像を配置でき、どんな場所でもアイデアが浮かんだ時に、データを残せます。作成したレイアウトを、Photoshop や Illustrator へ転送し、PC で作り込みもできます。

Adobe Captuer CC

紙に書いたオリジナルイラストを、データとして取り込みができます。
また、画像から色を抽出することで、自分だけの配色パレットを作ると PC で使えます。
Sketch 用のブラシを作成しました。作成例として見せていただいたなかで、アイデア一つで面白いブラシが作れると感じました。

Adobe Preview CC

以前から私も使用していたアプリです。簡単にスマホやタブレットデザインを実機でプレビューができます。
アプリを知るまでは、スマホに書き出した画像を送り、確認作業自体に時間がかかっていました。 Photoshop が動いているマシンと同じネットワーク上にある、iPhone・iPad でデザインをリアルタイムにチェックができます。USB 接続でも可能です。

Adobe Photoshop Sketch

イラストや Captuer CC で作ったブラシを使って、iPad 上にイラストを描けるアプリです。
iPad Pro と Apple Pencil との組み合わせで触るのが初めてで、紙に書く感覚とはまたちがった表現ができたことが印象的でした。
筆圧感知機能がついているので、細く、太く描くこともでき、今までにない感覚でした。

Photoshop 実践

事前に Adobe Comp CC から PC へ転送したデータを使っていきます。
ここでは、Photoshop のアートボードの使い方、ガイドの引き方などを学びながらデータを作成していきます。

まず、事前に作ったカンプデータを Photoshop で開くと、「アートボード1」としてデータが作成されます。アートボードの複製で、「A案」「B案」としてデザインデータを作ることで、一つのファイルで管理ができるので作業効率のアップに繋がります。
また、アートボードのサイズを変更し、スマホやタブレットサイズにすることも可能です。

ライブラリーにロゴなどを登録する事で、別の作業担当者との共有ができます。例えば、会社ロゴをライブラリーに登録していれば、ファイルから開かずに使用できます。

画像の書き出し設定が新しく追加されました。
以前まではスライスツールを使って保存していました。グループ化した画像を選択することで書き出しができ、実務ですぐにでも使いたい機能です。

Illustrator で Web デザインする際の設定&機能徹底見直し

Web デザインをする際に、単位「ピクセル」キー入力「1ピクセル」の設定を学びました。
私は作業をするまえに、キー入力の設定確認することを忘れてしまいます。にじんでいるような画像が書き出されることで、大変だったことがあります。
グリッドに整合機能が見直され、書き出しの時に大変だったことが減るので作業短縮になります。

Illustrator にも「アセット書き出し」パネルが新機能で追加されました。ただし使用するには気をつける点があります。Photoshop のように画像をマスクしても、必要な部分以外も書き出されてしまうので、注意が必要ですよと教えてもらいました。

まとめ

アプリを中心に作業効率のお話や、新しい機能の説明を聞いたことで、多くのことを学ぶことができました。明日から実践できることが多かったので、自分の環境設定を見直するところから始めました。
全体を通して実例をいくつか見せていただきましたが、どれもレイヤー/アートボードもわかりやく整理されていました。自分なりのルールを決め、データの管理ができる Web デザイナーになりたいと思いました。

カテゴリー
イベント・セミナー情報
投稿者
nakanishi

アルファサードでは、週に1回の在宅勤務や週休3日制の選択等、個々のライフスタイルに合わせた働き方が可能です。

私は2016年7月に出産し、2017年4月に11ヶ月の産休・育休から復職をしたウェブディレクターです。現在、週5で9:30〜16:30という時差+時短勤務。今回は、妊娠出産〜復職を経験したウェブディレクターの働き方や気持ちの変化について書いてみたいと思います。

ロールモデルがまだまだ少ない

当社は男性比率が高い会社ですが、ここ数年のウェブ系セミナー等の参加者を見渡すとかなり女性が多くなったと感じます。男女関係なく働くことができる業界だと思いますが、私の周りでは、乳幼児の子育てをしながらウェブディレクターというお仕事をしている人は非常に少ないのが現状です。

私自身、当社において在職中に妊娠〜産休育休を経て復職した最初の社員です(働く母が入社したケースはいくつもあり、現在もモリモリ活躍中です!)。退職という選択はまったく頭になかったのですが、会社としても前例の無いこと。今までどおりには働けない中でどういう風に働きたいのか、会社や周囲にはどのように協力してもらいたいのか、自分から声をあげて伝えていくことが必要でした。

産休に入るまで普通に働ける?

つわりなどの体調不良を伴う方も多いので、今まで通り働けるかはその人による、としか言えません。特に妊娠初期はお腹も目立ちませんし、まだ会社には報告しづらい時期だと思いますが、お腹の赤ちゃんにとっては一番大事な時期なのでとにかく無理は禁物です。

新幹線による移動は医師からの制限が無ければ問題ありませんが、妊娠3ヶ月のときの出張は、いつもよりものすごく疲れてしまいました。つわりがほぼ無く比較的元気な妊婦だった私にとって、「今までの身体とは違うんだな」ということを実感した最初の出来事でした。

会社にはこの少し後で報告し、担当していたお客様にも事情を説明。
テレビ会議や電話での打合せで対応させていただき、どうしても出張が必要なときは別のスタッフに行ってもらうなど、周囲のサポートのおかげで産休に入るまで無事に働くことができました。

尚、妊婦健診や産院・自治体による母親学級など、何かと平日の用事が増えお休みを取ることも多くなります。これまでと同じ働き方はできないと早めに覚悟を決めて、無理をしすぎないことが最優先だと思います。

仕事から離れる寂しさ

引き継ぎも無事に終え産休に入ったにも関わらず、産前はまだ自分が関わっていた案件のことがすごく気になったり、会社の一員なのに一員じゃないみたいで寂しくなったりしていました。社内のSNSを時折チェックしてみるものの、自分の居場所の無さに気付いてそっと閉じる日々...。

とはいえ、子が産まれるとすぐに仕事のことは頭の片隅に追いやられ、「お世話しないと死んでしまうか弱い生き物」の24時間対応に明け暮れる毎日。時々、同僚から聞く会社の話は新鮮だったり懐かしかったり、気分転換になってとても楽しかったことを覚えています。

復職への不安と「戻る場所」があるということ

子が1歳に達するまで取得できる育児休業期間。
少し落ち着いたらスキルアップのための勉強ができるかな、そんな夢を見ていた自分にビンタをしたい気分です。勉強どころか、本やパソコンを開くことがほぼ不可能でした。業務に関連する本を読んだり、ネットの記事を読むことができるようになったのは復職直前になってからでした。

1年近く現場を離れた自分が以前のようにお仕事できるのか、周囲にも認めてもらえるのかという不安は今も感じるところですが、子も保育園という新しい場所で頑張っているので、「ママもお仕事頑張るね!!!」と気持ちを奮い立たせて、またこれから走り出したいと思います。

まだ復職したばかり、厳しい現実はこれからやってくるのかもしれません。よく聞く話だと、会社に着いた途端に保育園で熱を出してお迎えに行かないといけなかったり、次から次へと病気をもらってきてあっという間にママの有給休暇が無くなるなんて話も...。
また1年後ぐらいに、もっと具体的な働き方の話が書けるといいなと思います。

アルファサード株式会社では、一緒に働く仲間を募集しています

今回、妊婦向け制度の見直しをしてくれたり、復職後の働き方についても希望を聞いてくれた会社には感謝しています。この先も、妊娠出産を経ても働き続けたい女性にもっともっと優しい会社になるはずです(もちろん男性にも!)。
その人に合わせた働き方を受けとめてくれる当社にご興味のある方はぜひ!
採用情報 - アルファサード株式会社

カテゴリー
その他

先日リリースした「 Movable Type 自治体向けクラウド版」についてご紹介いたします。

「 PowerCMS 8341 」をバンドルし、JIS 対応済のデザインテーマがセットされた「 Movable Type 自治体向けクラウド版」をリリース

Movable Type 自治体向けクラウド版とは

Web アクセシビリティ対応を難しくしている要因に、過去に公開した膨大なコンテンツ群の対応や、運用フェーズにおける更新担当者の負荷・知識不足の問題が挙げられます。また、公共サイトにおいては試験のエビデンス作成の負担が大きいことも無視できません。

  • JIS 対応どうしたらいいか、わからない
  • スマホ対応どうしよう
  • 部署ごとの運用にしたい
  • 運用負荷が気になる

そんなお悩みを解決いたします!

JIS X 8341-3:2016 に準拠したテーマがインストール済

レベルA、AAに既に準拠しているデザインテーマ

レベル A、 AA に既に準拠しているテーマがインストールされているため、簡単に適用させることが可能です。キーボード操作がきちんとできるかどうか、などアクセシビリティ対応の心配はありません。
※ウェブサイト内で使用する画像などは必要に応じてアップロードしてください。

PowerCMS のプラグインである PowerCMS 8341を同梱

JIS X 8341-3:2016 の達成基準レベル A 、AA への対応支援をいたします。
共通テンプレート部分を除いた「コンテンツ」部分を評価し、人の手による検証が必要な場合は補助する機能を提供しています。そのため、誰が記事を書いたとしても、その内容をチェックできるのでアクセシビリティを維持したまま運用ができます。
また、プラグイン設定で HTML 文法に準拠していない箇所を自動修正することができます。

画像のコントラストのチェックもお手伝い

画像アップロード時にコントラスト比を自動テストを行います。
自動テストに失敗したものについて、ピッカーで色を拾ってコントラストチェックすることもできます。
各ウェブページや記事で利用されている画像と画像の代替テキスト( alt 属性値)を一覧表示し、修正した内容を一括適用することも可能です。

SNS やスマートフォン対策もばっちり

SNS の共有ボタンや設定、シェアされた場合にも自動表示される画像を設定できます。
またレスポンシブ対応となっているため、スマートフォンでの閲覧も可能。更新作業も一度で済ませることができます。

最大で 3 段階の承認機能付き

部門ごとに権限分けをしているため、運用時の管理がしやすくなっています。
権限がある場合は、ページ登録者が記事を書いた後に公開処理を行うことができます。記事の差し戻しは管理画面上で操作、自動配信メールでお知らせします。記事が公開されると、登録者と承認者に公開通知がメールで配信されます。

少しでも気になった方、実際にさわってみたい方は、ぜひお問い合わせください。
評価版もありますので、安心してお使いいただけます。

お問い合わせはこちらから
https://ssl.powercms.jp/inquiry/others.html

評価版のお申込みはこちらから
https://ssl.powercms.jp/inquiry/trial-8341cloud.html

お見積もり/ご購入はこちらから
https://ssl.powercms.jp/inquiry/buy-8341cloud.html

アルファサードの web アクセシビリティの取り組み

弊社では web アクセシビリティ向上への取り組みとして、無償ツールの提供の他、Movable Type やPowerCMS のプラグインとして JIS X 8341-3 への適合を支援する PowerCMS 8341 の開発や提供を行なっています。今後もよりよい web 、誰もが利用できる web の普及に微力ながら貢献していきたいと思います。

参照 URL

※ Movable Type はシックス・アパート株式会社の商標です。

カテゴリー
PowerCMS 8341

ページの先頭へ