スマホカメラとタッチで変わる制作現場(4):
Adobe Creative CloudとスマートデバイスでWebデザインのワークスタイルはどう変わるのかを検証する連載。今回は、モバイル用サイト、PC用サイトのワイヤフレーム/デザインカンプを作り込むのに有効なPhotoshopの新機能を紹介しよう。
“フォント”に分かって使えてる?:
アドビシステムズが提供するフォントライブラリサービス「Typekit」でモリサワフォントの一部書体が使えるようになったが、そもそもTypekitのライセンスや価格はどうなっているのか。モリサワフォントを使う上で問題点はないのだろうか。あらためて確認してみる。
機械学習で画像処理はここまで変わる:
アドビ システムズは、2015年10月6日(現地時間)に開催した「Adobe MAX 2015 Sneak Peeks」で、11の新技術を披露。顔写真3Dモデル化、絶対フォント感、複数画像検索、観光写真無人化、陰影分離、簡単フォント自作、消失点自動作成naなど、今回もデザイナー/クリエイターのみならず、日常的にデジカメやスマホで写真を撮る人でも欲しくなるような機能が多数見られた。
Adobe MAX 2015基調講演:
アドビ システムズが2015年10月5日(米国時間)に開催した年次カンファレンス「Adobe MAX」の基調講演の模様をUXデザイナー/Web制作者向けにリポートするのに加え、Adobe MAXで毎回アドビが発信しているメッセージについて考えてみたい。
モリサワと協力、追加費用なし:
アドビ システムズは2015年10月5日(米国時間)、フォントライブラリサービス「Adobe Typekit」にモリサワ書体とTypeBank書体の一部を追加したと発表。20書体が追加費用なしで日本でも利用できるようになっている。
2016年早めのリリースを予定:
アドビ システムズは2015年10月5日(米国時間)、UXデザイン向けプロトタイピングツール「Project Comet」を発表。現在開発中で、2016年早めのリリースを予定している。
アップデートはもうすぐ:
もうすぐ2015年2度目の大きな機能追加が予定されているDreamweaverについて、機能追加の方向性や、あまり知られていない裏技などを開発担当者に聞いた。
スマホカメラとタッチで変わる制作現場(3):
Adobe Creative CloudとスマートデバイスでWebデザインのワークスタイルはどう変わるのかを検証する連載。今回は、プロトタイピングアプリ「Comp」を使って簡単なWebデザインカンプを作成し、Photoshopで仕上げるというワークフローを紹介しよう。
写真素材サービスAdobe Stockも:
2015年6月16日、Adobe Creative Cloudが2015年版のメジャーアップデートを果たした。本稿ではDreamweaver CC 2015と周辺のサービスをレビューした結果を紹介する。
新人Webデザイナー/開発者も知っておきたい:
Web制作に長年携わる筆者が数あるテキストエディターの中から代表的な4つをピックアップ。機能別に違いをまとめてみたので、エディター選びの参考にしてほしい。
OSSのテキストエディター「Brackets」で使える、Web制作に便利なプラグインを紹介し、拡張機能マネージャーの使い方や便利なプラグインを探すコツ、プラグインのインストール方法について解説する。
スマホカメラとタッチで変わる制作現場(2):
Adobe Shapeで作った形状アセットをSurface Pro 3上のIllustratorで編集。タッチで簡単なワイヤーフレームの作り方を紹介する。
スマホカメラとタッチで変わる制作現場(1):
Creative Cloudのスマホ向けアプリAdobe Shape/Brush/Colorを使って、それぞれ形状、ブラシ、色の組み合わせをデザインの素材として日ごろから収集しておくと、アイデアを形にしてWebデザインなどに生かすのが効率的になる。その実例を紹介しながら、日ごろのデザインネタ収集の方法がどのように変わるのかを紹介しよう。
クリエイティブアプリ開発入門(2):
Photoshopのような写真編集や動画編集、ユーザー管理、描画用デバイス連携などの機能をアプリに追加できるSDKをXcodeに読み込み、iOS用サンプルプロジェクトの中身を探る。
クリエイティブアプリ開発入門(1):
Photoshopのような写真編集や動画編集、ユーザー管理、描画用デバイス連携などの機能をアプリに追加できるSDKについて概要とインストール方法を解説する。
OSSエディターでWebコーディングはここまでできる:
バージョン1.0となったオープンソースのコードエディター「Brackets」について、概要と、核となる拡張機能を使ってWeb制作をどこまで効率化できるのかを解説します。便利なプラグインの見つけ方も。
Adobe MAX 2014まとめリポート(4):
アドビシステムズが2014年10月6〜8日に開催した「Adobe MAX 2014」に合わせてAdobe Creative Cloudを「2014.1」として一斉にバージョンアップ。Web制作に関わるアプリケーションに絞って、そのアップデート内容を紹介していく。もうすぐ公開予定のOSSのコードエディターのBrackets 1.0の新機能も先行して紹介。
Adobe MAX 2014まとめリポート(3):
アドビシステムズが2014年10月6〜8日(現地時間)に開催した「Adobe MAX 2014」。新製品・新技術の発表ばかりに注目が集まったが、プロの制作現場には既存製品の機能追加も気になるところ。インタビューも交えてWeb制作ツールの今とこれからを考えてみたい。
Adobe MAX 2014まとめリポート(2):
アドビシステムズは、2014年10月8日(現地時間)に開催した「Adobe MAX 2014 Sneak Peeks」で、13の新技術を披露。一番盛り上がったのは、写真の時間を変えるという夢のようなエフェクトだった。
Adobe MAX 2014まとめリポート(1):
アドビシステムズは、2014年10月6〜8日(現地時間)で開催中の年次カンファレンス「Adobe MAX 2014」の基調講演で、9つのモバイルアプリとCreative SDKのiOS向けベータ版を公開。即座に利用可能とした。
ブラック案件駆逐法(終):
とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか!?【最終回の話】連載のこれまでを振り返り、プロのWeb制作現場におけるCCアプリの使い分け方についてまとめてみる。サンプルコード/PSDもあるので実際に試してほしい。
ブラック案件駆逐法(4):
とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか!?【今回の話】Webの流行に詳しいクライアントから「それ、レスポンシブにならないの?」とひと言。PhotoshopとEdge Reflowならリリースレベルのものがすぐに作れる?
ブラック案件駆逐法(3):
とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか!?【今回の話】コーダー不在時にクライアントから新たなページ追加のお願いが……。PhotoshopとMuseを使えば「デザインさえあれば何とかなる!」
ブラック案件駆逐法(2):
とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか!?【今回の話】LPを無事納品したところクライアントがひと言「ファーストビューの一部を動かしたい」という。Edge AnimateかFlash Proの新機能なら何とかなるか?
ブラック案件駆逐法(1):
とある小さなWeb制作会社を舞台に、クライアントからのさまざまなブラック案件を、Adobe Creative Cloud 2014を使って解決していくストーリー。ムチャ振りするクライアント、安請け合いするメンバー、それに振り回される制作者。果たして、無事にブラック案件を駆逐できるのか!?【今回の話】突然、ランディングページを作れという案件が降って湧いて来た。納期は明日だ。PhotoshopのカンプをParfaitとDreamweaverを使ってWebページに仕立てる流れを動画付きで解説する。
Webサイト作成手順を勉強するまとめ(終):
新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回は最近流行の「フラットデザイン」なパーツ/グラフィック素材の制作に役立つFireworksの使い方について。自動シェイプ、パス、ブレンド、ストローク、スライスの使い方や、シェイプに模様やパターンを入れる方法、CSS書き出しなど、さまざまなテクニックを紹介します。
Webサイト作成手順を勉強するまとめ(3):
新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWebアニメーション制作に役立つEdge AnimateやFlash の使い方について。エレメント、シンボル、モーションパスの使い方から、パブリッシュ方法、レスポンシブ対応、音の付け方、Flashからの変換まで、さまざまなテクニックを紹介します。
Webサイト作成手順を勉強するまとめ(2):
新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回はWeb制作現場で役立つDreamweaverの使い方について。初期設定、テキスト、画像、HTML、CSSの扱い方から、リンク操作、WordPressのテーマ制作まで、さまざまなテクニックをまとめて紹介する。
Webサイト作成手順を勉強するまとめ(1):
新社会人のWeb制作者/デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。初回はWeb制作現場で役立つPhotoshopの使い方について。初期設定、レイヤー、シェイプ、レタッチ、スライス、画像アセット機能の使い方、テキストの効果的な見せ方、イラレデータの扱い方から、Edge Reflowと連携したレスポンシブWebデザインまで紹介。
爆捗! WordPressテーマ作成ショートカット(6):
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、Compassの「設定変数」やCSSスプライト、CSS3 Media Queries(メディアクエリ)やミックスインの共有などに関する小技を紹介する。
爆捗! WordPressテーマ作成ショートカット(5):
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、SassベースのCSSフレームワーク「Compass」について、概要や使い方に加え、ベンダープレフィックスを書く必要がなくなる、画像をフォルダに置くだけでCSSスプライトを生成できるなどの利点も紹介。
爆捗! WordPressテーマ作成ショートカット(4):
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、Sassの環境構築、基本的な使い方、WordPressのテンプレート作成をSassではかどらせる方法、CSSをSass化する逆コンパイルサービスを紹介する。
爆捗! WordPressテーマ作成ショートカット(3):
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。
爆捗! WordPressテーマ作成ショートカット(2):
本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、WordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説する。
爆捗! WordPressテーマ作成ショートカット(1):
Dreamweaverの概要と新機能、WordPressの概要、環境構築を行う際に必要な初期設定などを紹介する。
無料でCreative Cloudを使い倒せ(17):
Dreamweaverの拡張機能の使い方や管理の仕方、便利な拡張機能、旧式のファイルからの変換方法、そしてAdobe Exchange/Extension Managerを紹介する。
無料でCreative Cloudを使い倒せ(16):
誰でもCSS3アニメーションが作れるDreamweaverの「CSSトランジション」機能について、概要や基本機能、使いどころなどを解説する。
無料でCreative Cloudを使い倒せ(15):
レスポンシブなWebレイアウトをコードを書かずに作れるツール「Edge Reflow」とPhotoshopの連携機能の特徴や使いどころを解説する。
無料でCreative Cloudを使い倒せ(14):
PhotoshopからWebへの画像書き出し作業を大幅に省力化できる、Node.jsベースのGenerator機能の特徴や使いどころを実例を交えて解説する。これで、開発者とデザイナーのケンカが少しは減るかもしれない?
無料でCreative Cloudを使い倒せ(13):
Creative Cloudアプリケーションの目玉機能の1つであるファイル同期機能。本稿では、ファイル同期機能の先行アクセスプログラムを用いて、同機能の特徴や使い方を紹介する。
D89クリップ(23):
「そのおばかアプリ、もっと面白くなるはずです」おばかアプリの百戦錬磨の2人を相手に、活発なブレスト会議が行われた
無料でCreative Cloudを使い倒せ(12):
Dreamweaver CCが2013年8月末にアップデート。前版のリリースからわずか2カ月という短期間でのリリースとなった。本稿では、今回のアップデート内容とそこに込められた意味を探る。
無料でCreative Cloudを使い倒せ(11):
アドビは、PhotoshopやFlash、Dreamweaverの他にもさまざまな取り組みを行っている。その1つがオープンソースへの協力だ。そういった取り組みの中から、今回は「PhoneGap」と「Topcoat」にフォーカスして解説する。
アクションカムを5モデル比較する本企画も今回でラスト。今回は車載での夜間画質を比較し、総評として製品の選び方を考えてみたい。
アクションカムはその性質上、ボディが小さく、必然的に操作ボタン類も小さい。スマホ対応を含めた、実利用に際しての操作性をチェックする。
アクションカムを語る上で外せないのが、カメラを自転車やヘルメットに固定する「マウント」の存在。そのアレコレを考察する。実写例もあわせて紹介する。
スポーツなどのシーンをプレイヤー視点で撮影できるカメラ、アクションカムが盛り上がっている。今回は国内外、代表的な5機種を様々な方法でテストし、その特長を比較してみることにした。まずは概要の比較だ。
デザイナーのためのWeb学習帳(7):
日本語化され使いやすくなり現在流行中。誰でも手軽にできるライブ配信Webサービス「ユースト」の簡単な使い方や手順を説明します
無料でCreative Cloudを使い倒せ(7):
HTML/CSSを編集するエディタは数多く存在する。アドビシステムズが提供する「Adobe Edge Code CC」もそのうちの1つだ。