自分の経験をシェアしたい。Webデザインのテクニック&効率化。

HTML/CSSは、初心者でも簡単に使えますが、運用するとなると綿密な設計が必要です。 最近、自分の知識をアップデートするためにいろいろ調べたのですが、知識不足を実感し、あらためてHTML/CSSは奥 …

写真撮影や写真購入予算がない場合はよくあります。 そんな時に、写真素材集を利用するのもひとつの手段です。 普段からどんな写真があるのかチェックしておくと、探す時に便利です。 写真素材 足成【フリーフォ …

タイポグラフィって、本を読んでも難しかったりするし、一生勉強し続けなければならない分野です。 そんな中、米倉明男さんのスライドが非常にわかりやすかったのでご紹介。 Webデザイナーのためのタイポグラフ …

Photoshopを使っていたら、何かの拍子に作業スペースが拡大されて、タブも選択できず、ウィンドウがドラッグできなくなることがありました。 これが 何かの拍子にこうなってしまう。 対処法 「F」を押 …

この10年くらい、Webデザインをする場合は、Fireworksだったのですが、開発が終了することもあり、メインソフトをPhotoshopに変更しました。 慣れるまで時間がかかりましたが、20点ほどデ …

当たり前のことを行わないために、仕事が遅くなっているのをよくると、もったいないなと思います。 以前新人の頃、仕事が遅いと、それだけで、信用を落としました。 ちょっとしたことでも、仕事が早いだけで、信用 …

4月から新たにデザイナーになる人も多いのではないかと思います。 クライアントやディレクターから、「あのサイトのような動きにしたい」と依頼されることも多いかと思います。 そんな時に便利なものを、初心者で …

仕事をしていて次のようなことで焦ったことはありませんか？ 期限が迫って焦る 作業が多くテンパってしまって、何からやっていいのかわからない 焦るばかりで、頭が働かない状態になると抜け出すのは難しいです。 …

最前面は「 Shift + Command + ] 」 最背面は「 Shift + Command + [ 」 最前面 レイヤーを選択し、「 Shift + Command + ] 」。 選択したレイ …

コピーしたいレイヤーを選択後、 「command（ctrl）」+「J」。 コピーしたいレイヤーを選択し、 「command（ctrl）」+「J」でレイヤーのコピーが作成されます。

デザインをやっていて、写真を並べたいときボックスと余白の計算が面倒だったりしませんか？ そんな時に便利なサイトが「Gridulator」です。 Gridulator: Make pixel grids …

「等伯 〈上・下〉」は松林図屏風で有名な絵師「長谷川等伯」を主人公にした小説で直木賞受賞作です。 「松林図屏風」の、しっとりとした落ち着いた画風から穏やかな人物かと思ったら、「等伯」に描かれているのは …

キャンペーンサイトなど、動きをつけて、もっと目立たせて欲しいなどの要望を受けることは多いのではないでしょうか。言われて探すのは結構手間がかかったりします。見栄えする動きを中心にまとめました。 Phot …

最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモ …

jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、

*で#area内の全ての …

プログラムを勉強したいけど、何から初めていいかわからないと言う声をよく聞きます。 本を買って勉強するもいいですが、気軽に学習するなら「ドットインストール」をおすすめしています。 ドットインストール & …

サイトを制作していて、Altに何が入っているのかチェックするのは結構大変ですが、私はずっとFirefoxのプラグインのWeb Developerを使っています。 Web Developer 使い方 い …

「トーチ」というリイド社が発行するWebマガジンです。 いくつかの作品が定期的にアップされていますが、どれも個性的でおもしろいですので、仕事の合間にどうでしょう？ トーチWeb お気に入りの作品を二つ …

「ウォーレン・バフェット 成功の名語録 (PHPビジネス新書) 」と言う本があったので手に取ってみた。 ウォーレン・バフェットについては「投資家」「お金持ち」くらいの知識しかないのだが、立ち読みしてた …

サイトをみていて「どんなプログラムやサーバー、プラグインを使っているんだろう？」と思うことありませんか？ 私の場合、サイトのソースコードをみて判断するのですが、 ソースが長かったり、使用しているプラグ …

仕事している上で一番のストレスになるのが、人間関係。 自分の場合、以前の職場のときに一緒にやっているディレクターのパワハラがひどくかなり困ったことがありました。 とにかく、怒りっぽく、怒りはじめると自 …

シャープをかけすぎて失敗したという経験はありませんか？ シャープをかけすぎた場合は、command+Shift+Fで、シャープのかけ具合を微調整できます。 「フィルタ」→「シャープ」→「シャープ」を実 …

新人の頃、周りより仕事が遅いためよく叱られていました。 さらにデザインが遅いので、デザイナーとしては致命的でした。 （しかもクオリティも低かったです．．．） こうなると会社に居場所はありませんでした。 …

最近購入した本の 「デザインノート EXTRA good design company 水野学」は good design companyの水野学さんを特集した本です。 水野学さんは、「くまもん」やd …

必要なテクスチャ素材を探していて時間がかかったり、 やっと見つけたと思ったら商用利用不可だったり、 と素材を探すのは結構手間です。 そんな時には、テクスチャも作ったが早いです。 PhotoShopの知 …

西日本新聞経済電子版のCMを九州ゆかりのクリエーターが月替わりでつくる企画の6月が非常におもしろかったのでご紹介。 西日本新聞qBiz WebCM第1弾｢カッパ篇 エピソード1｣: 電通九州の左俊幸氏 …

まだレスポンシブの案件が少なく、 知識もスキルもまだまだなのですが、 いくつか作ってみて、困ったことの解決方法です。 もくじ Javascriptを使った場合の端末ごとの処理 フォントによる見栄えの違 …

先日、Dreamweaverを使っていたら、 ワークスペースからドキュメントの 「コード」「分割」「デザイン」ボタンが消えてしまい困ったので、 表示・非表示の方法を記します。

上のような丸いドットの並んだ破線を作る方法です。

グラフィックのみ、コーディングのみの WEBデザイナーは少ないのではないかと思います。 マーケティングやSEOやアクセス解析など、 必要な知識が多岐にわたります。 勉強する上で、概要を知るのは上達の近 …