Webデザインのタネ

Gulpでタスクの対象外にしたいファイルやディレクトリを指定する

Web制作の決まりきったものを自動化するのにとても便利なGulpですが、ときにはあるディレクトリの中のディレクトリやファイルを対象外としてタスクを処理したいといったことがあります。 Sprite用の画像置き場として作っていた「_sprit

2015/03/23 09:59

Webフォントで文字化けしたときのよくある原因と対処法

ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、

2015/03/16 08:26

ロゴデザインを学ぼうと思って読んだ本に「プロとしての生き方」を教わった話

Webデザインは他の媒体デザインからも学べることが多々ありますね。今回は僕が実際に「ロゴデザイン・ラブ」という本を読んで、これだけは押さえておきたいなと感じたポイントを紹介します。

2014/07/25 14:06

AcrobatやAdobe Readerで自動繰り返し再生するスライドを作る

先日はPowerPoint、Keynoteで自動再生するスライドショーをの作り方を紹介しましたが、投影するPCによってはPowerPointが入っていなかったり、Windowsマシンを使わざるを得ない場合があります。そんなときに便利なのがど

2014/07/24 15:43

Keynoteで自動繰り返し再生するスライドを作る

PowerPointで自動スライドショーを作る方法を紹介しましたが、今回はKeynoteで自動再生するスライドショーの使い方を紹介します。

2014/07/17 09:45

PowerPointで自動繰り返し再生するスライドを作る

PowerPointでは自動で繰り返し再生するスライドが作れます。普段だと自分でタイミングをみてスライドを動かすことのほうが多いですが、自動で再生する方法もあります。今日はPowerPointは自動で繰り返して再生する方法を紹介します。

2014/07/16 08:34

ピクセルパーフェクト、フラットデザイン、Sass、取り残された気分な方におすすめ「現場のプロが教えるWeb制作の最新常識」

著者の一人、WEBCRE8.jpの酒井優さんより「現場のプロが教えるWeb制作の最新常識」をいただきました！自分でSassの解説をしておいて言うのもなんだかアレなんですが、最近のWeb制作まわりは変化が多いですね＞＜それはCSSプリプロセッ

2014/04/08 12:30

日本ディレクション協会1周年 感謝祭で話します

こんにちは、花粉というビッグウェーブに乗って、薬を大量に買い込んだしばっちです。今回はイベント登壇のお知らせです。僕が裏方で写真を撮りまくっている日本ディレクション協会が先月で1周年を迎えました。これがあるのも、0からのWebディレクション

2014/04/03 17:25

僕が読みやすいSassコードを書くときに気をつけていること2つ

CSS Niteに出演しますと書いてそれっきり、、、2ヶ月ぶりのエントリーです。こんにちは、しばっちです。タイミング的に仕事がぼんぼんやって来て、嬉しい悲鳴をあげる反面、フリーランスとは断ることを覚えないと大変なんだなということを痛感してい

2014/02/20 15:24

Fireworksにはスライスレイヤーに色をつけられる

先日はFireworks以外のツールでのスライスを書きましたが、いかがだったでしょうか。「この背徳者！」と言われず、内心ホッとしております。さて、今日はFireworksにしかできないところで地味なスライス機能を紹介します。

2013/12/14 09:36

SassのことでCSS Niteでお話します

どうもこんにちは、しばっちです。今日は宣伝をさせてください！来年2月15日土曜日、「CSS Nite LP, Disk 32: Sass」に出演することになりました。

2013/12/09 12:31

FireworksユーザーのためのPhotoshopとIllustratorのスライスまとめ

Fireworksをよく使う僕が、最近PhotoshopやIllustratorのデータをもらってコーディングだけすることが増えてきました。それぞれのツールでやる機会があったので、躓きそうなところまとめてみました。最近はPhotoshop

2013/12/04 09:52

日本ディレクション協会のサイトを制作しました

もう2ヶ月ぐらい前になりますが、会社を退職して充電と称しながら、日本ディレクション協会（以下、ディレ協）のサイトをリニューアルを手伝っていました。今日はどのようなところに力を入れていたのか、しばっち目線で紹介していきます。

2013/11/17 21:33

IllustratorでカラーパネルのRGBやCMYKを素早く切り替える

IllustratorのカラーパネルでRGBからHSBへ切り替えるときはパネル右上のメニューから選択してましたが、もう少し楽になる方法がありました。

2013/11/11 15:59

Photoshopでimagesフォルダを書き出さない方法

普段は相変わらずFireworksを使っていますが、ときにはPhotoshopやIllustratorでビジュアルを作って、そのままスライスして作ったほうが早い場合もあります。ですが、デフォルトで書き出しをすると必ず「images」フォル

2013/11/01 18:23

「Web制作者のためのSassの教科書」をいただきました

1ヶ月ぐらい前になりますが、著者の平澤さん・森田さんより「Web制作者のためのSassの教科書」をいただきました。ありがとうございます！実はSassの教科書には以前Webデザインのタネで書いたEmEditorでSassを開く場合の一通りの設

2013/10/17 10:48

Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法

Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったり

2013/10/10 11:56

iOS 7のコントロールセンターをアプリ内で使えなくするには？

iPhone 5sに機種変更しました！しばっちです。もともとiPhone4からの変更だったので、さくさくと動いてくれてるだけで満足しています。コントロールセンターは便利だけど、たまにお節介さて、iOS 7ではコントロールセンターがつきました

2013/09/30 01:55

Dreamweaverのテンプレート・ライブラリ機能とPHPのincludeの使い分け

サイトでヘッダーやフッター、サイドカラムなどのページの共通で表示するときには、直にHTMLを書かずにDreamweaverのテンプレートやライブラリ、もしくはPHPでincludeすることが多いと思います。僕も誰が主にファイルを編集するこ

2013/09/29 20:52

Webディレクターズマニュアルを小さいデバイスでも読みやすいように最適化しました

書くことがいっぱいで目が回り気味のしばっちです。こんにちは。Webディレクターズマニュアルのデザインリニューアル公開してから2年。中の人こと健太（@cafekenta）からは「このロゴマークでピンときたって言う人が多いよ」「スマホでデザイ

2013/07/09 09:59

0からのWebディレクション講座：運用編へ行ってきました

僕は最近いろいろありまして勉強会と聞きつけては顔出させてもらっています。順々に書いていきたいところですが、長年一緒に仕事をしていたWebディレクターズマニュアルの健太こと@cafekentaが話をするということで0からのウェブディレクショ

2013/07/01 08:47

デザインに迷ったときに相談する際のマイルール5つ

こっちの色でも、そっちの色でもどっちでもいい。でも、どちらも腑に落ちない。僕にはこんな経験がよくあります。一人問答をしてそれでも納得できないとき、最終的には周りに相談します。その際に相談するときにはある程度自分のルールを持っています。今日

2013/06/03 10:04

素早くWebデザインをするためにディレクターにお願いしてること5つ

長年一緒に仕事しているディレクター、Webディレクターズマニュアルの@cafekentaにいつも口酸っぱくお願いしていることをまとめてみました。限られた時間で高いクオリティ、高いモチベーションを維持して納品したいので僕は彼に5つのお願いを

2013/05/19 22:38

『「なるほど！」で理解する jQueryのカルーセルを解説する本』を読んだ

先月紹介しました、『「なるほど！」で理解する jQueryのカルーセルを解説する本』をようやく読み終えました。紹介記事を書き上げてから「取り組むなら今でしょ？」という気持ちになって、ちょうど1ヶ月前からスキマ時間を見つけて少しずつ進めて行

2013/05/07 14:11

Fireworksで点線を作るまとめ 第2版

Fireworksの開発が終了というニュースを聞きつけて、朝からびっくりしているところです。このまま使い続けるか、機能を代替できるものに移行するか、ブラウザベースで作っていくのかよく考えて進めていきたいですね。さて、以前Fireworks

2013/05/05 02:03

Sublime Textの地味に便利なショートカット5つ

SublimeText 2をゆっくり使い始めている今日この頃です。今日は個人的に知っておくと便利なデフォルトのショートカットを紹介します。

2013/04/21 16:24

2012年末〜3月でしばっちが買った本10冊

今年は読んだ本のリストを毎月末に書こうと思ってましたが、なかなか時間が取れなかったので今回は約4ヶ月分まとめてお送りします。

2013/04/07 23:15

Webデザインのタネ ドメイン変更のお知らせ

いつもWebデザインのタネをお読みいただき、ありがとうございます。この度ドメインを変更しました。新しいサイトURL）http://blog.1dz.jp/新しいRSSのURL）http://blog.1dz.jp/?mode=rssお気に

2013/03/31 13:01

CSS Niteビギナーズ：Web解析へ行ってきました

先日、Web解析をテーマにしたCSS Niteビギナーズに行ってきました。セッションひとつひとつが復習になりそうなものから、Google Analyticsでそんなことできるの？みたいな発見まで、とても参考になるものばかりでした。

2013/02/05 09:57

CSS Nite LP26に行ってきました

だいぶバタバタした年末年始でしたが、明けましておめでとうございます。今年もマイペースに更新していきますので、どうぞよろしくお願いします。さて、昨日土曜日はCSS Nite LP26へ行ってきました。今回はCSSプリプロセッサ特集ということで

2013/01/13 14:48

Dreamweaverで原稿流しの様子を撮ってみました

普段のブログの原稿を流している様子をそのまま撮ってみました。撮ってみたのは前回の記事です。再生時間は約7分。2画面分を小さな幅に収めているので、全画面で見ていただくのをおすすめします。（最近は図が多いのでFireworksでモック1枚作

2012/12/10 10:23

Fireworksでモックの変更に便利なシングルレイヤー編集

Fireworks Advent Calendar 6日目の今日はちょっとしたTipsを書かせてもいます。モックを作ってスライスまでしたのに、文言追加や写真の差し替えでオブジェクトの選択をしようとしたのに、違うものまで選択してしまったとい

2012/12/06 10:06

CotEditorでSassファイルを開くには？

今日はCotEditorでSassファイルの対応していく設定例を紹介していきます。CotEditorはZenCoding＋アウトライン表示ありのエディタですが、Sass編集においてはデフォルトの設定だと要素の親子関係が分かりにくかったりし

2012/11/30 10:00

EmEditorでSassファイルを開くには？

今日はEmEditorでSassファイルの対応をしていく設定例を紹介していきます。デフォルトはどうだったっけ？ってという部分もあって、すでに設定している場合もありますが、そこはスルーしてもらえばと思います。

2012/11/19 10:02

DreamweaverでSassファイルを編集するには？

DreamweaverでSassファイルを編集しようとすると、テキストファイルという認識になってしまい、CSSのときのようにキーワードに色がついたり、コードヒントは出てきません。CSSと同じようにするには、次のように設定します。

2012/11/15 09:57

HTML・CSS・Sassのコーディング環境 2012

平日7日間ずっとDreamweaverを書いてきました。今日は僕の現在のコーディング環境を紹介します。WindowsHTML→DreamweaverCSS→DreamweaverSass→EmEditorコン

2012/11/14 09:59

Dreamweaverのコードカラーリングまとめ

ネット上に公開されているコードカラーリングも集めてみました。他にいいところないかなと探すと結構公開されていますね。一つ一つプレビューしてみました。テーマ名というのが特になかったので、便宜的にブログの名前を使わせてもらいました。

2012/11/13 10:00

Dreamweaverのコードビューのコードカラーリングを作ってみました

Dreamweaverのコードビューの背景や文字色は設定で変更できます。背景を黒くすると、目の負担が軽くなってちょっと肩こりもよくなったような。ちょっとモチベーションも上がりましたw

2012/11/12 10:01

Dreamweaverからファイルをお気に入りのエディタで開くには？

僕の中ではインストールしたときに一番最初にやる設定です。Dreamweaverではファイルパネル上で違うテキストエディタや画像編集ソフトで開くことができます。PHPやJavaScript、SCSSファイルのようにDreamweaverで作業

2012/11/09 10:10

DreamweaverでZen Codingの展開後の文字をカスタマイズするには？

僕は普段Zen CodingでCSSを書いています。「bgc」と入力して展開すると、「background-color:#FFF;」と初期値が入ってしまって、テキストカーソルを戻して本来設定したかった値を入れていくのはちょっと面倒です。Dr

2012/11/08 09:58

サイト定義したフォルダーをExplorerやFinderで開くには？

サイト定義をしているフォルダーをファイルパネル上から簡単にExplorerやFinderで開くことができます。ファイルパネルから選択しているファイルのところで右クリック→［エクスプローラー］、Macであれば［Finder で表示

2012/11/07 09:56

デザインビューで置いたカーソルをコードビューに移動するには？

Dreamweaverでは分割コードビューを使っていることが多いです。原稿を流しこむときはデザインビューでやっていますが、構造が複雑なHTMLを書いたりYoutubeの埋め込みタグやFacebookのウィジェットを大きさを調整しながら書い

2012/11/06 10:04

Dreamweaverで適用しているCSSを確認するには？

FirebugやChromeのデベロッパーツールのように、デザインビューから要素を選択して、適用されているスタイルがどのCSSの何行目に書いているのかをDreamweaverで確認できます。

2012/11/05 10:07

IllustratorからFireworksに狙い通りの幅でペーストする

【追記】くっきーさんがサイズずれをなくしてペーストするコマンドを開発してくださいました！（2012/10/25 20:40）IllutratorからFireworksにテキストをコピペする機会も増えてきたので、それをぴったり合わせる方法も合

2012/10/25 10:09

Fireworksでテキストブロックの幅を固定する方法いろいろ

モック制作時、サイドカラムのメニューの中の仮文言を本物の文言に差し替えたら、長くてカラムからはみ出してしまった経験があるかと思います。これを回避するために文字幅を固定したテキストブロックを作るのですが、マウスでやろうとしたらなかなか面倒な

2012/10/17 09:02

WEBCRE8で配布しているパターンをFireworks用テクスチャにしてみた

ドラクエ三昧なしばっちです。暑中見舞い申し上げます。WEBCRE8の優さん（@glatyou）が先日Photoshop用のパターンファイルを公開してくださいました。しかしFireworksユーザーの僕では.patファイルをそのまま使うことが

2012/08/06 10:14

Fireworksの拡張まとめ（2012年8月版）

以前にFireworksの拡張機能のまとめを書きましたが、あの記事を書いてから1年近く経ちました。この1年でFireworksもCS5.5からCS6にバージョンアップしたり、コマンドを積極的に使うようになったり、新しく使い始めた拡張機能もあ

2012/08/01 10:02

スマホサイトのスクリーンショット撮影アプリ「Full Screen Capture - MobWeb.Goody」が便利

今日はiPhoneアプリの紹介です。スマホサイトのをスクリーンショットのアプリというと、画像が圧縮されて汚くなったJPEGだったり、画像の幅が320pxでもう一歩というところでした。こちらのアプリはスクリーンショットを撮るに当たって必要な

2012/07/17 10:03

Fireworksで覚えておくと便利な文字設定まわりのTips

FireworksやPhotoshopなどのグラフィックツールでWebデザインのモックを作る際、文字ツールは矩形ツールより多く使うことが多く、文字設定のショートカットを覚えているだけでも効率は全然違います。グラフィックソフトで一番に覚える

2012/07/09 09:59

Fireworksのコマンドをインストールする方法

Fireworksで「これちょっと面倒だな」といった作業をコマンドや拡張機能を使うことで、より少ない手順で済ませることができます。 拡張機能はかんたんにインストールができます。しかし、コマンドについては知る人ぞ知る方法みたいになっているの

2012/06/11 10:08

DreamweaverのインタフェースをCS3風にする方法

DreamweaverはCS4から挿入パネルのアイコンがグレースケールになり、マウスオーバーでカラーがついて、さらにサイドパネルに移動しました。が、慣れ親しんだインタフェースに戻すこともできます。もう慣れてしまっている方も多いと思いますが

2012/06/05 09:58

PhotoshopやIllustratorを組み合わせて5分でも早く！Fireworks中心に制作している僕のAdobeソフトの使い方

このブログではFireworksのことを中心に書いていますが、仕事ではFireworksはもちろん、PhotoshopもIllustratorも使っています。それぞれのソフトのおいしいところだけをいただく、まさにつまみ食い的に使っている感

2012/05/24 09:56

Fireworksで色を効率よく再利用するにはスウォッチが便利

Fireworksで色を効率的に再利用するには、スウォッチパネルに色を登録していきます。オブジェクトを選択して、スウォッチパネル内でカーソルがバケツになる場所をクリックします。削除するには消したい色にカーソルを合わせ、［Ctrl＋クリック

2012/05/18 10:06

Fireworks初めての方にオススメしたいサイトと参考書

Fireworksユーザーが僕のまわりで少しずつ増えているような感じがしたので、Fireworksを初めて使う人、他のツールを使っていてFireworksを触ってみようと考えている人向けに読んでおくと良さそうなサイトや本を集めてみました。

2012/05/16 14:50

Fireworks CS6体験版を使って驚いてしまった強化点

Adobe CS6のパッケージ版やCreative Cloudのサービス開始は明日11日ですが、一足先にFireworks CS6の体験版がダウンロードできるようになったので、さっそく試しに使ってみました！結論から先に書くと、アプリ・サイ

2012/05/10 10:02

FireworksでAdobeRGBの写真を色の遜色を極力なくして読み込むには

Fireworksでは現状sRGBのカラーモードしか持っていません。なので、sRGBの写真を素材としてもらったときはそのまま読み込んでも問題ありませんが、デジタル一眼カメラで撮影した写真でAdobeRGBの写真をそのまま取り込んでしまうと

2012/05/07 10:05

続・Fireworksで文字組みのしっかりした本文を作りたいときはIllustratorからコピペするといいかもしれない

昨日の「Fireworksで文字組みのしっかりした本文を作りたいときはIllustratorからペーストするといいかもしれない」で、CSS Niteの鷹野さんから「プロポーショナルメトリクスだけじゃなくて、他のものも取り上げてみるといいよ

2012/04/17 03:25

Fireworksで文字組みのしっかりした本文を作りたいときはIllustratorからコピペするといいかもしれない

Fireworksはどうしても文字組みに関して設定できる値が少ないせいか、PhotoshopやIllustratorを見ては指をくわえている状態です。しかし、IllustratorでコピーしたテキストはFireworksでも文字をある程度

2012/04/16 10:04

Windowsのかゆいところに手が届く！便利なフリーソフト13選

Macのフリーソフトばかりが取り上げられるけど、僕は6年間ひたすらWindows...。ちょっとうらやましくも思いながらも、原稿のやりとりというただ一点でMacBookAirを個人的に買っても本格的に移せないしばっちです。Windowsのソ

2012/03/14 10:02

Fireworks Users Groupの第3回勉強会に参加して未公開の拡張機能を教えてもらいました #fwug03 #adobefireworks

珍しく週に3回もブログを書くなんてと驚かないでくださいね、しばっちです。先週日曜日、勉強三昧の最終日はFireworks Users Groupの第3回勉強会に参加してきました。つい金曜日にCSS NiteでもFireworksの勉強したば

2012/02/10 09:58