PC用のHTML・CSSは書ける方向けに、スマートフォン・タブレット・PCなど様々なデバイスで閲覧できる「レスポンシブWebデザイン」を実際に作ることで身につける講座です。 意味がよくわからないままコピペで済ませるのではなく、「レスポンシブWebデザインの意味を理解して自分で書けるようになる」事と「素早くコーディングできるようになる」事をテーマにしています。 レスポンシブWebデザインだけでなく、素早い HTML・CSS コーディングを手助けするための「Emmet」や「BEM」など、モダンなコーディングに必要な知識の習得も含む5時間×2日間（合計10時間）の講座です。 受講方法について この講座は今後の開催予定はございませんが、ご自宅で動画受講することが可能です。 動画受講の場合、YouTube限定公開の動画と、Webブラウザーでご覧頂ける授業テキスト（教科書）をご覧頂き、ご質問があればメ

Photoshopで画像を制作している時、ぼかした色の境界が暗くなったり濁った色や不自然な色になってしまうことがあります。 また、他の方が制作したデータでカラー設定を合わせているはずなのに境界部分の色が変わってしまうということがあります。 この記事では、その原因と対処法について解説します。 きっかけ YouTubeで公開されている Computer Color is Broken（コンピューターの色は壊れている）という動画でこの問題について解説されています。 この動画は英語ですが、内容を日本語に翻訳した記事もあります。 参考: なぜ画像に「ぼかし」を入れると色の境界部分がつぶれてしまうのか？ – GIGAZINE 記事の最後に 一部の画像編集ソフトでは、数学的にも一切誤りのないアルゴリズムを使用できるにもかかわらず、デフォルト設定となっていない とありますが、これはPhotoshopのこと

クライアントから頂いたデータがWordやPowerPoint形式だった、あるいはテキストだと思って頂いたデータが画像文字だったということは残念ながらあるかもしれません。 この記事では、どうすればWordやPowerPoint形式のデータから画像を取り出したり、画像文字をテキストに変換できるかということについて書いています。 WordやPowerPoint形式のデータから画像を取り出す 例えば作業しているPCにWordやPowerPointが入っていないという場合はどうやって画像を取り出せば良いのでしょうか？ 実は、それらのファイルの拡張子を .zip に変換してからダブルクリックするだけで画像を取り出すことができます。 ※画像は一般的にZIPを展開してできたフォルダー内の［word＞media］フォルダー内にあるはずです。 なぜこのようなことができるかというと、.docx や .pptx

Web制作をしていると、ちょっとした英語の文章を日本語に訳したい、または日本語の文章を英語にしたいということがあります。 そういったとき、［Google翻訳のページを開く＞文章をペーストして翻訳ボタンを押す］よりも、ChromeのアドレスバーからGoogle翻訳できると少し便利です。 以下の方法は、Chrome for Mac/Windowsで使用できます。Android/iOSでは使用できないようです。 設定方法 Chromeの環境設定を開き、右上の検索ボックスに［検索］と入力します。 ［検索エンジンの管理…］をクリックします。 ［その他の検索エンジン］の1番下の箇所に以下のように入力します。 ［検索エンジンを追加］に［Google翻訳］ ［キーワード］に［tr］ ［URL］に［http://translate.google.co.jp/?source=osdd#auto|auto|%s

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン フリーランスデザイナーの「つくること、はたらくこと」 // Speaker Deck Twitter などでかなり話題になっていたスライドです。 企画からフォント、写真などデザインの基礎が一通り解説されています。 7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法 | TomoyukiArasuna.com 慣れていないと、ついついワイヤーフレーム通りに作ってしまいますよね… Photoshop CC 2015.5アップデート・派手な新機能は公式に任せて、地味に有益な改善を見てみよう（そして今あるバグも） – やもめも 主に写真関係の新機能について解説されています。

過去のCCバージョンを削除せずにCC 2015をインストールする方法 まず最初に注意点ですが、Creative Cloud デスクトップアプリケーションから CC 2015 インストールする際、［詳細オプション］をクリックして［以前のバージョンを削除］のチェックを外さないと、CC や CC 2014 が削除されます。 詳しくは以下の記事をご覧ください。 参考: 新登場、メジャーアップデート Photoshop CC 2015年リリース | Adobe Creative Station Photoshop CC 2015の新機能 同じレイヤースタイルの重ねがけ レイヤースタイルパネルで、［境界線］などの右にある［+］をクリックすると、同じレイヤースタイルを追加できます。 これまで、1つのレイヤーに境界線を2つかけたりすることができず面倒な代替方法が必要でしたが、だいぶ楽になりそうです。 注意

これまで、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

この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇

先日、Stocker.jp / Space にて Adobe CC検証会 を開いたのですが、主に Illustrator CC と Dreamweaver CC の話をしました。 厳密には私が Photoshop CC の話もしたのですが、話した内容は以下の記事にまとめていますのでここでは省略します。 Adobe Photoshop CCファーストインプレッション | Stocker.jp / diary なお、Illustrator CC の新機能とバグについては、主に Illustrator Mania というサイトの管理人であり、Illustrator のお祭り dot-ai にも出演された鈴木さん（ @suzukisan__ ）にお話いただきました。 ※この記事で使用している画像サンプルは、鈴木さんが勉強会で使われていたものではなく、私が作成したものです。 Illustrator

私が執筆した「プロになるためのWebデザイン入門講座　実践で役立つPhotoshop＆Illustrator徹底ガイド」が7月24日に技術評論社より発売されました。 表紙（カバー含む）も私がデザインしています。 Amazon で紙の書籍版を購入する Gihyo Digital Publishing で電子書籍（PDF）版を購入する この本は、PCの基本操作（エクスプローラーや Finder でファイル整理、文字列を選択してコピーなど）ができる方であれば、まったくWebデザイン制作の経験がない方でもWebデザインの基礎を学び、Web制作のためのPhotoshopとIllustratorの基礎を学び、広告バナーや架空のカフェのWebサイトを制作できるように書かれています。 本書の内容 本書は、7つの Chapter（章）で成り立っています。それぞれの Chapter は以下の内容となっています

数週間前から、「Adobe Photoshop CS6 は写真合成機能が大幅に向上している」という報道を見ることが多くなってきました。　例: GIZMODO しかし、Webデザインに関係ありそうな部分といえば「段落スタイル」と「パフォーマンスの向上」くらいで、これはスルーした方がいいかな…と思っていたのですが、試しに CS6 Windows 版のベータ版を使ってびっくり。Webデザインに関連する部分も大きく進化していました。 正直、「これは買い」だと思っています。 この記事では、私がこれまでに見つけた Adobe Photoshop CS6 の Webデザインに関連しそうな部分の変更点についてまとめています。 一部、私のWebデザインスクール の生徒の方が見つけたものもあります。この場で御礼申し上げます。 ※この記事は Photoshop CS6 ベータ版（Windows版）をもとに書かれ

新年あけましておめでとうございます。 1月7日から8日にかけて「Photoshop CS2 が無償化!?」とちょっとした騒動になり、その後 Adobe から「正規ライセンスを所有されていないお客様のご利用はライセンス違反となり得る旨、ご理解の上ご利用いただけますようお願い申し上げます。」という非常にもやっとしたプレスリリースが公開されました。 Adobe のブログには「不特定多数の皆様に向けて無償でライセンスを提供しているという事ではございません。」と書いてあるので、結局「CS2 のライセンスを持ってない人はダメ」という事だと思います。 Twitter などでは CS2 無償化騒動について非常に騒がれていて、「Photoshop を使ってみたいけど高すぎる」と思っている方は、想像していた以上に多いのかなぁと感じました。 さて、「Photoshop を使ってみたいけど高すぎる」と思っている皆

ご存じの方もいらっしゃると思いますが、Adobe Photoshop は JavaScript で制御することができます。 Photoshop 用の JavaScript ファイルのことを「JSX」と呼びます。拡張子は .jsx です。 Photoshop を使ってWeb制作されている方は多いかと思いますが、Photoshop は本来写真加工用のソフトでありWebデザイン用のソフトではないため、特にレイアウト機能が Fireworks、Illustrator、InDesign などに比べ貧弱です。 しかし、JSX を使用することにより Photoshop のレイアウト機能やWeb制作向けの機能をある程度向上させることができます。 JSX は昔から Photoshop に搭載されていましたが、書き方の参考になるような書籍やサイトが少ないためかそれ程注目されていなかった気がします。 しかし、最

この記事は、2011年版の MacBook Air について書いています。2012年版の MacBook Air については以下の記事をご覧ください。 MacBook Air 2012のレビューとWeb制作者のための設定など 先日、新しい MacBook Air（13インチ・SSD 128GB）を購入しました。 私は Web制作 のメインマシンにするために購入したのですが、購入するまでは正直「こんな薄いマシンをメインにして大丈夫かな…」と不安でいっぱいでした。 結論から言うと、私の使い方（Web閲覧・Web制作・PhotoshopによるWebデザイン・動画閲覧等）であれば全く問題なく、今まで使っていた MacBook Pro 13インチ（2010年モデル・2.4GHz・メモリ8GBに増設）や、昨年使っていた DELL のデスクトップPC（Core 2 Duo・メモリ4GB）よりも明らかに動

この記事は、特定のフォントを愛する人が、そのフォントの一体どこがいいのか、どうしてそのフォントでなくてはダメなのかを語る #LOVEFONT Advent Calendar 2012 の10日目の記事です。 AquaKanaとは AquaKana（Aqua かな、アクアかな などと表記されることもあります）は、OS X（Mac の OS）のメニューやタイトルバーなどの UI に使われているフォントの名前です。 隠しフォントになっているため、通常アプリケーションのフォント一覧には出てきません。ですので、Mac ユーザーでもこのフォントの存在を知らない方もいらっしゃると思います。 Mac のコンテンツ部分に標準で使われている「ヒラギノ角ゴ Pro」と、UI で使われている「AquaKana」で「ファイル　ウインドウ　ヘルプ」などを比較するとこんな感じです。 AquaKana は一見ゴシック体の

昨日は、はじめて iPhone を使った日のような、新鮮で、とても心地よい感動を味わうことができました。 iPhone 版 Flipboard は、私が想像していたより遥かに便利で、快適で、心地よいアプリでした。 iPad 版 Flipboard が素晴らしいという噂は以前から聞いていて気になってはいたのですが、MacBook Air も持っているのに Flipboard だけのために iPad を買うのはちょっとな…と思って買わなかったため今まで Flipboard を使ったことはなかったのですが、ようやく iPhone 版がリリースされたため、昨日はじめて使ってみました。 Flipboard を起動すると、どんなジャンルのニュースを読みたいかを選択する画面になります。 News、Technology、Designなど… 好きなものを選択すると、Flipboard の画面にカテゴリ別に、

私はメインマシンとして Mac を使用していますが、一時期全くメンテナンスをせずに使っていたら、10ヶ月ほどで買った時より明らかに動作が遅くなってしまいました。 そこで、最近は毎月1回メンテナンス作業を行うことにしています。 具体的には以下のような感じです。 関連記事: Windows 10を快適に使用し続けるために月1回やった方が良いメンテナンス ディスクユーティリティ メニューバー右端の検索アイコンをクリックするか、command + space または control + space キーを押して Spotlight を起動します。 disk と入力します。すると、候補にディスクユーティリティが出てくるはずなので、Enter キーを押して起動します。 ディスクユーティリティでディスクを検証 ディスクユーティリティの［First Aid］ボタンをクリックし、［実行］をクリックするとMa

HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く　　このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず

この記事は、2011/9/11 に神戸芸術工科大学で開かれた「WordCamp KOBE 2011」で私がお話しした「WordPressサイトをデザインする時に気をつけていること」というセッション内容をブログ記事として起こしたものです。 当日はたくさんの方にお越しいただきありがとうございました。 会場に入れなかった方もいらっしゃったそうですみません。 この記事で、少しでも内容を共有できればと思います。 このセッションでは、オリジナリティのあるWordPressサイトのテーマをデザインする際に私が気をつけていることについてお話させて頂きます。 このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジナルのWordPressテーマをデザインする際に気をつけていることです。 このセッションで伝えたいこと このセッションでお伝えしたいことは「4つ」あります。
いずれも、私がオリジ

この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない