2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
2017年10月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 正式版がついにリリース！CCライブラリで画像もPhotoshopと連携 #AdobeMAX #AdobeMAXJP | Adobe Creative Station Macだけでなく、Windows版も正式版がリリース。名前は Adobe Experience Design から Adobe XD に変わったそうです。 Adobe XD CCに今後追加される機能は？#AdobeMAX #AdobeMAXJP | Adobe Creative Station Zeplinとの連携など「サードパーティツールにも対応」とのことですが、アドオンは自由に作れるようになるのですか
神速Photoshop [Webデザイン編]を書きました。
神速デザインシリーズの最新刊、神速Photoshop [Webデザイン編] が3月26日に全国の書店や Amazon、各電子書籍ストアにて発売されます。 神速Photoshop [Webデザイン編] は、既に Photoshop を使ったWebデザインカンプ制作ができる方向けに環境設定からカンプ制作、画像の書き出しなど各ジャンルにわたって時短テクニックをまとめたものです。 Amazon（紙の書籍） Amazon Kindle（電子書籍） iBookStore（電子書籍） BOOK☆WALKER（電子書籍） 楽天ブックス（紙の書籍） 主な内容 Chapter 01 設定の神速テクニック Photoshop は本来写真補正用のアプリケーションなので、そのまま使おうとするとWebデザインカンプ制作の効率は非常に悪くなります。 「Photoshop はWebデザインには向いていない」という方や、「
![神速Photoshop [Webデザイン編]を書きました。](https://cdn-ak-scissors.b.st-hatena.com/image/square/de6c6b490621fc8d49a3a6daf9f77009065eaf34/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fshinsoku-ps-1.png%3Ffit%3D388%252C500%26ssl%3D1)
2014年1月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 今年もよろしくお願いします。 Webデザイン Illustrator CC（17.1）アップデート概要（1）ライブコーナーと鉛筆ツールの改良、カスタムツールパネル – DTP Transit（CC, Illustrator） 先週このブログに書いた記事 Photoshop CC、ついに外部ファイルをリンクできるように には Photoshop CC 14.2 の新機能に絞って書きましたが、実は Illustrator も結構アップデートされています。 Illustrator で図形やイラストを制作される方には便利な変更だと思います。 Illustrator Layer Exporter Photosh
HTML5 Conference 2013の資料まとめ
HTML5 Conference 2013 は、昨年に引き続きとても有意義なセッションが沢山ありました。スタッフの皆様、講演者の皆様、大変ありがとうございました。 この記事では、各セッションの資料（スライド等）、動画、ツイート等をまとめています。 今年はかなり大量の資料があるため、この記事は7ページに分割しています。 セッションの動画は、ルームごとに1つの動画になっています（つまり5つのセッションが1つの動画になっています）が、観やすいようにそれぞれのセッションごとに頭出し再生されるように埋め込んでいます。 目次 オープニングセッション（基調講演）+ルーム1A（このページ） オープニングセッション（基調講演） 現場の実例から学ぶ、最新鋭のWebアプリケーション開発フローとアーキテクチャ Responsive Web Design 〜Basic understanding〜 CSS Regi
Adobe CC検証会を開きます
7/16（火）19:30〜渋谷「Stocker.jp / Space」にて、Adobe CCに関する情報交換を目的とした検証会を開きます。 これは特定の方の話を聞くタイプのセミナーのようなものではなく、参加者同士が情報交換する勉強会です。 「Stocker.jp / Space」前方のプロジェクターを使って新機能などのデモやプレゼンテーションをして頂ける方は無料、話を聞きたいだけの方は ¥1,000 でご参加頂けます。 今回の勉強会の内容 Adobe CC製品（Edge含む）の新機能の紹介 「新機能を使ってこういうことができる」というデモ バグ情報などの共有 私は、Photoshop CCの新機能のデモと、Dreamweaver CCのバグについて話す予定です。 Illustrator Mania の管理人であり、Illustratorの変態としても名高い鈴木さん（ @suzukisan_
Adobe Photoshop CCファーストインプレッション
Adobe Photoshop CC が公開されたので、早速レポートです。 Photoshop CCは、見た目はほぼ Photoshop CS6 と同じですが、パネルを使用したシェイプサイズの変更や角丸の再編集など、Webデザイナーにとっても地味に便利な機能が追加されています。 パネルを使用してシェイプサイズを変更・移動 これまで、長方形などのシェイプのサイズを数値指定で変更するには、Ctrl+Tキーなどを押して自由変形モードにし、「基準点」の「左上」をクリックしてからサイズを変更する必要があり、手間がかかりました。 私の場合は、自作の JSX（スクリプト）でシェイプサイズを変更していたのですが、Fireworks のプロパティインスペクタや、Illustrator の変形パネルのようなものを作ろうかと思っていた矢先に標準機能として搭載されました。 新しいパネルが増えたのではなく、長方形な
Stocker.jp / Spaceについて
【期間限定】最新のJavaScriptの基礎を学ぶ「新JavaScript基礎講座（動画講座）」が期間限定で割引価格で受講頂けます！ Web制作の基礎から学べる「スマートフォン時代のWebコーディングスクール」初回体験レッスンの動画が9月末まで無料です。 「スマートフォン時代のWebデザインスクール」およびその他のレッスンは、渋谷駅徒歩7分の教室にて開催しています。 ※ただいまCOVID-19感染拡大防止のため、Webデザインスクール等はご自宅での動画受講のみ開催し、こちらの教室での授業は休止しております。教室のレンタルもしておりません。 室内写真と設備について 室内完全リフォーム済みで、50㎡以上あります。 スクール形式で現在30名ほど座ることができます。 奥のスクリーンは、約150インチのワイドスクリーンです。 これは、奥から入口側を撮影した写真です。入口側はカフェスペースとなっており
[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版（MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う）の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
![[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6e22153e1233d79c8da8733fc112f935fe5ee4a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Ftypographic-1-1.png%3Ffit%3D500%252C250%26ssl%3D1)
Photoshopで長方形などのシェイプを移動・変形・複製するJSXをアップデート
PhotoshopでWebデザインカンプなどを制作している方にはかなり役立つ、「シェイプを移動・変形・複製」するJSXをアップデートし、シェイプを移動・変形・複製する際に、まれに数値のズレが発生するバグを修正しました。 以前から、以下の記事で「数値を指定してシェイプを作成」するJSXと「シェイプを移動・変形・複製」するJSXを配布していました。 PhotoshopでのWeb制作効率を向上させる「JSX」とは 「数値を指定してシェイプを作成」するJSXは問題なかったのですが、「シェイプを移動・変形・複製」するJSXには時々「間違ったサイズを取得してしまう」という致命的なバグがあり、どうすればそれが直せるかわからないままでした。 しかし、ようやく解決方法を思いついたので、「シェイプを移動・変形・複製」するJSXの修正版を配布します。以下からダウンロードしてください。 使い方 ダウンロードした
私の愛したフォント「AquaKana（アクアかな）」 #LOVEFONT
この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。 AquaKanaとは AquaKana（Aqua かな、アクアかな などと表記されることもあります）は、OS X（Mac の OS）のメニューやタイトルバーなどの UI に使われているフォントの名前です。 隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。 Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル ウインドウ ヘルプ」などを比較するとこんな感じです。 AquaKana は一見ゴシック体の
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
iPadは自炊＆電子書籍ビューアとして使えるか？
この記事は、2012年3月に発売された、10インチの新しいiPad（第3世代）での自炊書籍・電子書籍活用法について書いています。 2012年11月に発売される、10インチの iPad（第4世代）も画面の解像度や重さなどはほぼ同じなので、参考になると思います。 ただ、ここに書いてある「読みやすい」などの表現は、あくまでも私の主観であることをあらかじめご了承ください。 私は、iPhone は4の時から使用していましたが、iPad はこれまでずっとスルーし続けてきました。 それをなぜ今さら、しかも iPad mini が発売されると噂されているときに購入したかというと、自分の部屋にWeb関連の本が増えすぎて2つの本棚に収まりきれなくなり、床から積み上げなければならないような状態になったからです。 今まで本の自炊は避けてきたのですが、これ以上本棚を増やすわけにもいかないので、この際思い切って iP
[WordCamp資料]WordPressでWebアプリケーションを作る方法～Croppy編～
この記事は、WordCamp Tokyo 2012でお話した「WordPressでWebアプリケーションを作る方法～Croppy編～」の内容をまとめ、分かりやすいように + 一部のコードについてセッションよりも詳しく加筆したものです。 WordPress に Twitter・Facebook ログインのようなソーシャル性を取り入れたWebアプリを作るためのプレゼンをするにあたり、最初は「ノンプログラマーでもできる」みたいなタイトルにしようかと思ったのですが、さすがに PHP が分かっていないと厳しいかと思いますので入れませんでした。 普段 PHP を全く書かない方には少々難しいかもしれませんが、ある程度 WordPress をカスタマイズできる方ならなんとかなるかな…という程度かと思います。 Croppyとは Croppy は、ほぼ WordPress でできているWebアプリです。 気に
![[WordCamp資料]WordPressでWebアプリケーションを作る方法～Croppy編～](https://cdn-ak-scissors.b.st-hatena.com/image/square/ecd2788c73bf4fe2c30c0116e541fcc599fc08f9/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fwctokyo_2012.001.png%3Ffit%3D1024%252C768%26ssl%3D1)
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
Stocker.jp 管理人のブックマーク
フリーランスのWebデザイナーです。 東京の下北沢で、うさぎと一緒に暮らしています。 渋谷で「スマートフォン時代のWebデザインスクール」の講師をしています。 Twitterでは、Web制作に関する最新情報をツイートしています @Stocker_jpさんをフォロー 新着記事 「スマートフォン時代のWebコーディングスクール」を渋谷で開催します 「スマートフォン時代のWebコーディングスクール」は、これからWeb制作者になりたい方向けにスマートフォン対応のHTML・CSSコーディング手法やSass・JavaScriptの基礎などを全7回で学べる社会人向けのスクールです。 モダンなFireworks後継アプリは存在するか？ この記事は、DIST.28 「モダンWebデザインワークフロー2019」というWebデザインの勉強会のLTとして私がお話しした内容をまとめたものです。 私は1999年のFi
年末年始にWebデザインを学び直すための3つのステップ
この記事は、以下のような方を対象にしています。 現在Webデザインを仕事にしていて、さらにデザイン力をつけたい方 今はプログラマー、ディレクター、コーダーなどデザイン以外の仕事をしていて、来年はデザインも手がけたい方 ※この記事は、2010年末に公開したものを、文章と参考サイトなどのリンク先を修正し、2019年末に再公開したものです。 私は元々Webデザイナーなのですが、デザイン以外の仕事が連続したときなどデザインスキルの低下が心配になってくるので、年末年始など時間があるときは自己流のWebデザイン勉強法をしています。 もしかしたら他の方にも役立つかなと思い、公開しました。 今回は、主にWebデザインの中でも「レイアウト」について書いています。 まずは「知る」こと 私がWebデザインについて基礎からきっちり勉強したいと思い、Webデザインスクールに見学に行ったり「Webデザイン」と名の付く
Macでのブログ執筆に役立つ、3つのアプリと周辺機器
私は普段 MacBook Air でブログを書いているのですが、ブログを快適に書くために使っているアプリや機能や周辺機器（？）をいくつかご紹介します。 MiniShadow Mac でブログ書いてて便利だなーと思うところは、アプリのスクリーンショットが撮りやすいことです。 Windows だと PrintScreen でクリップボードに入れた後、Photoshop などに貼り付けて PNG で書きだして…という手間がかかりますが、command+shift+4+space を押して任意のウィンドウやダイアログをクリックするだけで、ドロップシャドウ付きで透過PNG形式でデスクトップに保存してくれます。 OS の機能だけでここまでできるのは便利なのですが、「ドロップシャドウが大きすぎる」のがちょっと難点。 ブログの限られた画面内ではウィンドウ内を大きく見せたいのですが、ドロップシャドウに大きな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今見てるページタイトルとURLをコピーし、Amazon商品ページだったらアフィIDを付けるブックマークレット
