Affinity Designerを動画に活用、Sketch, Figmaとの使い分けなどイベントの登壇内容まとめ
この記事は、2019年7月に開催した「Affinity User Group JAPANミーティング #1」での大嶺 建さんと勝谷 元気さんの登壇内容の動画等をご紹介します。 Affinity Designerで簡単YouTube動画制作術 登壇者の大嶺 建さんはYMRchannelというYouTubeチャンネルをされていて、動画編集ではDaVinch Resolveを使用されています。 テロップ作成にAffinity Designer、サムネイル作成にAffinity DesignerとAffinity Photoを使用されているそうです。 個人的には、Affinity Publisherで制作した雑誌風スライドの完成度の高さが目を引きました。 このスライドのPDFは以下からダウンロードできます。 PDFをダウンロード Affinity Publisher形式のデータは以下からダウンロー
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
いつもはAmazonで買物をする私が高価な家電だけはビックカメラで買う理由
普段は書籍だけでなくミネラルウォーターやちょっとした家電は Amazon やヨドバシ・ドット・コムで買うことが多い私ですが、高価な家電、特に洗濯機やプロジェクターのような回転する部品が入っていて故障しやすそうな家電を買う時はビックカメラで買うことが多いです。 しかも、ネットではなく店舗まで足を運んで買うことが多いです。 その理由は、実物を見たいというだけでなく「ビック長期保証に入るため」です。 ビックカメラで商品を買う時、通常は 10% ポイント還元となりますが、それを 5% に減らすかわりに5年保証を付けることができます。 家電量販店の延長保証はヨドバシカメラやヤマダ電機など各社がやっていますが、大抵は2年目以降は修理代の100%保証ではなく、2年目は80%→3年目は60%など年々上限が下がっていくものが多いです。 しかし、ビックカメラの長期保証は5年間ずっと 100% のままです。 私
Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
Google Analyticsのコードがコピーされても動かないようにする方法
Web関係のブログをやっていると、なぜかページ内の JavaScript などがそのままコピーされて中小企業のWebサイトにペーストされ、Google Analytics に見知らぬWebサイトの URL が混じってくることがあります。 これで困っている方がいたので、自分のサイト以外に自分のサイト用の Google Analytics コードが使われても動かないようにする方法を考えてみました。 JavaScriptで、表示されているページのホスト名を取得する JavaScript では、location.hostname プロパティを使用すると、今表示しているページのホスト名（example.com など）を取得することができます。 参考: window.location – Web API インターフェイス | MDN たとえば、このページを表示している時に Chrome の開発者ツール
Photoshop CCの画像アセット機能でSVGを書き出す裏技
SVG はモダンなWebブラウザーで表示できるベクター画像形式で、Retina ディスプレイや、タブレットでピンチアウトで表示拡大した時にも荒く見えないため、これから使用する機会が増えそうな画像形式です。 SVG は Illustrator で書き出すことができますが、これまで Photoshop ではプラグインなどを使わなければ SVG を書き出すことができませんでした。 しかし、Photoshop CCの「画像アセット」機能を使用して SVG を書き出す裏技を見つけたので紹介します。 準備 下記のファイルをダウンロードします。 Macの場合 Finder でメニューの［移動＞ホーム］を選択し、ホームフォルダを表示します。 そこに、generator.json ファイルを移動またはコピーします。 Windowsの場合 ユーザーフォルダ（ユーザー名のフォルダ）に移動します。 そこに、gen
Macの基礎の基礎: Finder編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という声を最近よく聞くので、これから数回にわたって「Macの基礎の基礎」という連載をすることにしました。 アプリケーション別に記事を書く予定で、第1回目となる今回は「Finder」編です。 記事の内容は基礎編ですが、最後に Mac ユーザーの間でも意外と知られていない機能や新機能について書いています。 なお、この記事は主に Mac OS X 10.7（Lion）以降向けに書いていますが、私は OS X 10.9（Mavericks）を使用していますので、設定画面や機能など多少異なる場合があります。 画面キャプチャー（画像）は、すべて OS X 10.9（Mavericks）のものです。 はじめに: Windowsユーザーの方へ この記事は、基本的に「Mac に乗り換えたけどいまいち使いこなせない」方向
ブログのスマートフォン対応の際に考えたこと
遅ればせながら、2014年8月にこのブログのスマートフォン対応を行いました。 iPhone, iPod touch, Android, Windows Phone, BlackBerry などの各種スマートフォンのほか、 Kindle, Sony Tablet, Nexus 7 などのタブレットではスマートフォン用のテーマで表示されるはずです。 iPad は、PC 用のテーマのほうが見やすいと感じたのでそのままにしています。 なぜ今までスマートフォン用のテーマを作っていなかったのか 一番大きな理由は「見づらいというご意見をいただかなかったから」です。 また、昨年まではスマートフォンからのアクセスは 10% ちょっとしかなかったため、それほど必要性を感じていませんでした。 とはいえ全く何の対応もしていなかったわけではなく、iPhone や Android の場合は、本文のフォントサイズが少し
GoogleとAdobeのフォントNoto Sans（Source Han Sans）の画期的なところ
2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
Web制作者のための黒い画面（ターミナル）入門講座を開きます
Web制作者向けの記事を読んでいて「以下のコマンドを実行し…」などと書かれていても、どうすればよいかわからない なんとなく「黒い画面（ターミナル）のことを知らないとまずいんじゃないか…」と思っているけど勉強できていない 黒い画面が怖い、よくわからない Windows 10 でも Linux のコマンドが使えるようになったので、今のうちに使い方を知っておきたい などの方に向けた無料講座を 2020/1/12（日）の 14:00 から 16:00 まで 渋谷 Stocker.jp / Space にて開きます。 この講座は「これからWeb制作を始めたい方」または「Web制作経験がある方」「WordPressを使用したWeb制作にご興味ある方」向けの講座です。 Web制作の経験がない方もご参加頂けます。 ※Web制作未経験の方は、この講座とあわせて「スマートフォン時代のWebデザインスクール」体
Macの基礎の基礎: テキスト入力と編集とテキストエディット編
このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple
Macの基礎の基礎: Spotlight編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル
Chromeの「シークレットウィンドウ」はWeb開発にとても使える
皆さん、Google Chrome の「シークレットウィンドウ」使ってますか？ Google Analytics を見る限り、このブログでは Google Chrome がトップシェアですが、周りの方に話を聞いてみると、残念ながら Google Chrome の「シークレットウィンドウ」機能はそれほど使われていないようです。 あれほど Web 開発に使える機能は他にないのに…と残念に思っていても仕方ないので、活用方法をまとめて記事にしてみました。 目次 まずは基本の使い方 Webサービスにログインしている状態としていない状態を同時に確認 Webサービスに2つのアカウントで同時にログイン Webページの表示がおかしい時は、まず「シークレットウィンドウ」で確認 検索エンジンでの順位チェックは「シークレットウィンドウ」で ニコニコ動画が何度もエラーになる時は「シークレットウィンドウ」で まずは基
HTML5 Conference 2013の資料まとめ
HTML5 Conference 2013 は、昨年に引き続きとても有意義なセッションが沢山ありました。スタッフの皆様、講演者の皆様、大変ありがとうございました。 この記事では、各セッションの資料（スライド等）、動画、ツイート等をまとめています。 今年はかなり大量の資料があるため、この記事は7ページに分割しています。 セッションの動画は、ルームごとに1つの動画になっています（つまり5つのセッションが1つの動画になっています）が、観やすいようにそれぞれのセッションごとに頭出し再生されるように埋め込んでいます。 目次 オープニングセッション（基調講演）+ルーム1A（このページ） オープニングセッション（基調講演） 現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ Responsive Web Design 〜Basic understanding〜 CSS Regi
知らないと損する賃貸マンションの探し方 :: Stocker.jp / diary
来年１月末で今住んでいる賃貸マンションの更新月なので、この機会に渋谷の近くに引っ越そうと思い、物件探しを４日間集中してやったところ、なんと 下北沢駅の近くで鉄筋コンクリートの広めのワンルームが共益費込みで月８万、初期費用は敷金礼金仲介手数料など込みで実質 ８万（家賃無料期間1ヶ月付き）というかなり破格な物件を見つけることができました。 この記事では、私が物件探しの際に気をつけたことを12のポイントとしてまとめています。 皆様の物件探しのお役に立てれば幸いです。 Photo by (c)Tomo.Yun 日本全国、賃貸の相場が最も下がるのは11月 都内だけでなく、以前熊本で物件探しをしたときも11月は安かったのでこれは間違いないと思います。 なぜ１１月かというと、２月や３月は家を探している方が多いので、必然的に相場が上がりますが、逆に３月まで期間が開いていて、引越する方が少ない時期は相場が下
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
「WebデザイナーのためのWordPress用サーバセットアップ勉強会」を開きます
9月17日（火）に、渋谷 Stocker.jp / Space にて「WebデザイナーのためのWordPress用サーバセットアップ勉強会」を開きます。 講師は paperboy&co.（ロリポップやヘテムルなどの運営会社）や mixi のサーバ管理をしていた @srockstyle さんこと小林 翔平さんです。 （私もアシスタントをします） ※この勉強会は、早くも満席になったため一旦お申込みを締め切らせて頂きました。 なぜ、Webデザイナーもサーバのセットアップ方法を知るべきなのか 例えば、 WordPress を少しでも高速に動かしたい（表示を速くしたい） サーバ代金を抑えつつ、たくさんの方が同時にアクセスできるようにしたい 同じサーバ内の他のユーザーの影響を受けたくない ターミナル（いわゆる「黒い画面」）と仲良くなりたい と思っている方であれば、サーバのセットアップについて勉強する価
[閲覧注意]アメリカのPhotoshopの本って…
最近とても気になっていることがあります。 アメリカというか、英語圏の Photoshop の本の表紙について、です。 以前、Photoshop と Illustrator を使ったWebデザインの入門書（プロになるためのWebデザイン入門講座）を書いていた時に、「Photoshop を使ったWebデザインの本って、海外にはあるのかな？」と気になって、Amazon.com で「Photoshop」というキーワードで検索してみました。 すると、出てきた本の表紙が… …90年代？と思ったのですが、Photoshop CC（2013年にリリースされた最新版）と書かれてますね。 ちょうど、昨日 下北沢オープンソースCafe で作業してた時にこの話題が出たので、英語に堪能なオーナーの河村さんなどに聞いたところ、「DUMMIES」は日本でいう「できるシリーズ」のような初心者向けのシリーズだそうです。 P
![[閲覧注意]アメリカのPhotoshopの本って…](https://cdn-ak-scissors.b.st-hatena.com/image/square/c791842828ba15e1a6306c6107d27f00ce371dae/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fpsusa-1.jpg%3Ffit%3D400%252C500%26ssl%3D1)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今見てるページタイトルとURLをコピーし、Amazon商品ページだったらアフィIDを付けるブックマークレット
