AdobeのFigma買収とAdobe XDのこれから
2022年9月15日に、AdobeがUIザインツール「Figma」を買収する意向であることが発表されました。 これに関してWebデザイン勉強中の方などが「これからFigmaとAdobe XDのどちらを勉強するべき？」と困っているツイートを拝見したのでそれに対する私なりの回答と、 Webデザイナー・UIデザイナーたちの反応や温度感 Web業界の方が意外と見落としている事 脱Adobeしたい方のためのガイド などについてまとめてお話ししたいと思います。 なおこの記事に関しては事実だけでなく、私の予想や、私の周囲のWeb制作者の方の反応や予想なども含まれることをあらかじめご了承ください。 追記: Adobeの製品一覧からXDが消滅し、Adobe XD公式ページは消滅 「Adobeのすべての製品一覧」から #AdobeXD が消えました。「XD」で検索しても出てきません。 Dreamweaverで
Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ | Stocker.jp / diary
Webデザイン Photoshop、Illustrator、XD、Sketch…結局どれを使ってWebデザインすればいいの？ Thursday, September 27th, 2018 Webデザイン制作で使用するアプリは多様化しており、これからWeb制作をはじめたい方にはどれを選べば良いか分かりにくいかもしれません。 それぞれのアプリケーションには一長一短あり、用途によってどのアプリケーションが適切かは変わります。 この記事では、Photoshop、Illustrator、XD、Sketchに絞り、それらのアプリケーションの特徴についてまとめています。 なお、この記事の内容は 世界一わかりやすいIllustrator & Photoshop & XD Webデザインの教科書 という書籍のLesson 01の内容を一部抜粋し、この記事用にリライトしたものです。 Photoshop向きのデ
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
2017年8月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD ベータ版8月リリース！CCライブラリでカラーや文字スタイルをPhotoshopなどと共有 | Adobe Creative Station かなり前から予告されていた「Creative Cloud ライブラリ」がようやく搭載されました。しかしPhotoshopやIllustratorのものと完全互換ではなく、カラーと文字スタイルなど一部の機能しか使用できません。 Adobe XDでCreative Cloudライブラリがサポートされましたが、利用できるのはカラーと文字スタイルのみなのですね。 個人的にはCCライブラリ経由で画像を使うことも多いので、早くサポートされない
MacBook Pro Late 2016レビュー: おっとTouch BarとUSB-Cの悪口はそこまでだ
MacBook Pro 13インチ Touch Bar モデル（Late 2016）を11/17から使用し、3週間ほど経過したのでレビューを書きました。 MBPの購入を検討している方で、特に「Touch Barってどういうものだろう？不便はないのだろうか？」とか「USB端子が変わったことによるメリットとデメリットは？」という事が気になる方に参考になるように書いています。約15,000文字あります。 Touch BarとUSB-Cについて多くの人が誤解していること レビュー本文の前に、まず大手メディアが報じているMacBook Pro、Touch Bar、USB Type-C（以下USB-C）に関する記事を読んでいると、明らかにまともにMacBook Proを使用せず書かれているとしか思えない、間違いだらけの記事や質が低い記事が多すぎます。 例えば 以下のようなことが書いてある記事は完全に間
「PCをWin7のままにしておきたいのに強制的にWin10にするMSが嫌だ！Macに行く！」という方へMacユーザーとして言っておきたいこと
Twitter などで「5年前に買ったPCを Win7 のままにしておきたいのに、強制的に Win10 にする MS が嫌だ！もう Mac に行く！」などというツイートを見かけることがありますが、Mac が大好きで、普段Macユーザー増えることに対して大歓迎のスタンスである私から1つだけ言っておきたいことがあります。 「こっち来んな。以上」 この記事はこれで終わりです…と言いたいところですが、さすがにこれだけでは普段 Mac を使っていない方には投げやり過ぎるかもしれないのでその理由を書いておきます。 5年前に買ったMacを使い続けられるのか 少なくとも メインマシンとして仕事でバリバリ使う のは厳しいです。 私の場合、5年前に買った Mac といえば MacBook Air 2011 ですが、4年前に知人に売却しています。 さすがに Mac を毎年買い換えている方は多くはないと思いますが
文字を使わない検索の世界と、ゆるやかなWebの衰退
TechCrunch Japan に以下のような記事が載っていました。 Googleは使わない、SEO対策しているから——Instagram有名人のGENKINGが語った10代の「リアル」 この記事には以下のように書いてあります。 「Googleで検索すると文字が出てくるし、（検索結果は）SEO対策されている。あとはスポンサー（広告）とかが上がってきて…ネットってリアルじゃない。Instagramは検索することで言葉より画像が表示される」 この中で「Googleで検索すると文字が出てくる」という部分、昔からネットに触れていた方であれば「検索結果をテキストで返すのは当たり前だろww」と言いたくなるかもしれませんが、私はこれからは文字を使わない検索や検索結果が増えそうだと考えています。 例えば iPhone の Siri は音声入力で「近くのラーメン屋は？」と尋ねると地図を返してきます。 In
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 ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ
2014年5月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Google Google、Windows版 Chromeの拡張機能をウェブストア経由に限定。ストア外入手は導入済みでも無効化 – Engadget Japanese 拡張機能の開発者は、今後も開発のためにローカルでのインストール可能なほか、インラインインストール機能を利用して自分のサイトで配信もできます。 ということで、Chrome の拡張を一般に配布するためには Chrome ウェブストアに登録する必要があるようです。 自分のサイトで拡張を配布するためのインラインインストール方法は、以下のページに書いてあります。 参考: Using Inline Installation – Google Chr
Macの基礎の基礎: テキスト入力と編集とテキストエディット編
このブログをお読みの方であれば、「テキスト入力や編集、テキストエディットなんてさすがに分かってる」という方が多いかもしれません。 しかし、以下のことをご存知でしょうか？ Mac は、control キーを使用することで、マウスを操作することなくさまざまなテキスト編集が可能である Mac には文字列を一時的に保持しておくための「クリップボード」のようなものが2つある。それらを使いこなすことでより効率のよいテキスト編集が可能である 「テキストエディット」では、複数行の検索や置換が可能である もしこれらのことをご存じなかった場合、この記事を読む価値があるかもしれません。 写真素材: ぱくたそ この記事では、前半は基本的な文字の入力方法、後半は control キーなどを使用したやや高度なテキスト編集の方法、テキストエディットの使いこなしなどについて書いています。 なお、この記事では Apple
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デザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
うわっ、日本のWebデザイナーの年収、低すぎ…？
以前、Webクリエイターボックスの「世界のWebデザイナーのお給料はいかほど？」という記事が話題になっていました。 記事そのものではなく、記事に対する Twitter や、はてなブックマークのコメントでの反応を見ていて個人的に気になったことがありましたのでここにまとめました。 「他の国とくらべて日本のWebデザイナーの年収は低すぎる」とか「海外に脱出するしかない」と嘆いている方がかなりいらっしゃったようですが、こういう見方もありますよ、ということで… ※この記事は、2013年に公開したものを2019年にリライトしたものです。 Webデザイナーは、海外に移住すれば給料が上がる？ 特定の方を晒しあげるつもりはないのでツイートを埋め込むのはやめておきますが、Twitter では「世界のWebデザイナーのお給料はいかほど？」という記事をツイートするときに、以下のようなコメントをつけている方が何名か
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
私が月に1度やってるMacのメンテナンス方法 | Stocker.jp / diary
私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa
HTML5カンファレンス2012の資料まとめ
HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
MacBook Air 2012のレビューとWeb制作者のための設定など
約1ヶ月前に MacBook Air 2012年版 が発売されたので、早速2011年版 MacBook Air から買い替えました。 今回購入したのは、13インチ / Core i7 / メモリ 8GB / SSD 256GB です。 去年の記事 では MacBook Pro 13インチから MacBook Air 13インチに買い換えた時の感動を中心としたレビュー記事でしたが、今回は時期的に、欲しい方はもう購入されていると思いますので、レビューだけではなく私がイントールしたアプリとその設定を中心に書いていきたいと思います。 目次 なぜMacBookを買い換えたのか なぜそのスペックにしたのか Apple Store店員の話 検証 その他のレビュー 私のMacBook Airの使い方 インストールしたアプリ 外付けスピーカー いくつかの問題点 気になった点 総評 なぜMacBookを買い換
Coda 2 ファーストインプレッション
Coda 2 が5月24日の0時に発売され、「本日限り半額（App Storeで ¥4,300）」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうｐするレビュー記事を見てから購入予定だからですよ :) ﾎﾚﾎﾚ…ﾝ? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが
WordPressを高速化するプラグインを作りました
今朝、WordPressのレスポンスを向上させるプラグイン “WP Hyper Response” を作りましたので早速公開します。 このプラグインを使用した場合と使用していない場合の比較動画を作りましたのでご覧ください。 右が使用した場合、左が使用していない場合です。 画面中央にキャプチャソフトのウォーターマークが出ていますがご容赦ください。 この動画は、私が運営している フリー写真素材 :: Free.Stocker のページ表示テストです。 ブラウザキャッシュを無効にするため、Google Chrome のシークレットウインドウを使用しています。 それほど大きな違いは出ていませんが、プラグインを使用したほうが記事ページ（single.php）の表示が速いことがお分かり頂けるかと思います。 後半は管理画面のテストです。 どう見てもプラグインを使用したほうが速くなっていることがお分かりい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
