サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
アメリカ大統領選
webdesign-memo.blogdns.com
今、すごく話題になっているエディター「Sublime Text2」 私もまだ使いこなせていませんが、Webデザイナーの私から見た便利なプラグインとその簡単な使い方をまとめてみました。 Webデザイナーが入れておきたいプラグイン -目次- AutoFilename Bracket Highlight Goto-CSS-Declaration Emmet hayaku Color Pick CSSComb SFTP LiveReload IMESupport(※) AutoFilename 画像などのパスの入力を補完してくれる便利なプラグイン。 画像やCSS,Javascriptを挿入するときに、パスの入力を補完してくれます。 例えばHTMLにCSSのリンクを挿入するとき linkと入力してtabキーを押せば <link rel="stylesheet" href=""> が展開されます
皆さんInstagram楽しんでますか? 皆さんは、どんな方(ユーザ)をフォローしていますか? twitterやFacebookのお友達をフォローするというのが、一番多い感じですか? 私は基本的そんな感じです。 写真もランチや夕食、旅先や出先でのショットなどが、ほとんどではないでしょうか。 でも、たまには、おしゃれで素敵な写真も見たいですよね。 そこで、私がフォローしている、おしゃれで素敵な写真をアップされている「おすすめInstagramユーザ」を紹介したいと思います。 題して「おしゃれで素敵な写真がいっぱい!おすすめInstagramユーザ50選」 では、早速紹介します。 大きく2つのカテゴリに分けてみました。 おしゃれなInstagramユーザ クリエイティブなInstagramユーザ おしゃれなInstagramユーザ 1. wonderingpango 2. 48co
Posted by kjweb | Posted in Illustrator, Webデザイン | Posted on 30-06-2011 最近というか、ここ1年くらい前から、私がWebやチラシなどデザインするときに、よく使っている素材を紹介したいと思います。(ありがちな素材ですが、使い勝手いいので紹介しようかなと) また、イラストレータで簡単に作れるので、その作り方の紹介したいと思います。 よく使う素材 ノート セロテープ ピン では、作り方を紹介します。 まずは完成を見て下さい。 背景や枠に使えますよね。 これをイラストレータで作っていきます。 【1】ノートの外枠を作る 角丸長方形ツールで、作りたいノートの大きさの角丸ボックスを作ります。 【2】ノートの穴を作る ノートの大きさに合わせて、穴の部分を楕円ツールで作ります。シフトキーを押しながら描くと円が描けます。 破った
Posted by kjweb | Posted in html, Mac, Webデザイン | Posted on 24-11-2011 Macを使ってWebサイトを制作していて一番不便と感じるのは、やっぱりIEの確認ですよね? IE6などの古いブラウザを無視して制作していいのであれば、全然問題ないのですが、まだまだ、そう言う訳にもいきませんよね。 特に私の職場では、WindowsXP SP1でIE6がメインになっているので、全然そういう訳にはいきません。。。 ということで、MacでIEの表示を確認する方法のまとめ記事を書いてみました。 確認は大きく分けて4つの方法 MacでIEの表示を確認する方法は、大きく分けて4つの方法があります。 (私が知る限りでは。。。) BootCampによるWindows環境で確認する方法 仮想のWindows環境で確認する方法 エミュレーターを使用
最近、Webページの作成にしろ、チラシの作成にしろ、表組を作ることが多くありました。 考えてみると、これまで表組ってあまり意識ぜずに作ってきたなぁと思って、少し表組のデザインを意識して作ることにしました。 いろいろ好みがあるとは思いますが、私が思うクールな表組を作るポイントをまとめてみました。 では、例をあげて説明してみたいと思います。 一般的な表組とクールな表組(私的に) 【例1】 統計局のページにあった表組です。よく目にする一般的な表組だと思います。 シンプルで見やすいです。 ですが、クールかと言えば、そうではなく普通な表組ですよね。 普通がいけない訳ではありませんが、私流にクールにしてみたのが下の表組です。 もう一つ例をあげてみます。 【例2】 架空のサービスの料金表を作ってみました。これもよくある表組ですよね。 普通に分かりやすく、見やすいですよね。でもクールとは言えない
常にMacを快適に使いたいですよね。 長時間使っていると動作が鈍くなったり重たくなったりしませんか?(しますよね?) これはMacOSXのメモリー管理の仕様が原因になっています。 MacOSXのメモリー管理は、メモリーを再利用することを前提に設計されていて、終了したアプリケーションなどのメモリーを一定時間開放しない仕組みになっています。 一定時間内であれば、終了したアプリケーションを再度立ち上げた時、高速でアクセスし素早く使うことができるようになっています。 そのため終了したアプリケーションでも一定時間メモリーを開放せずに無駄に消費していることになります。 この無駄に消費しているメモリーは、アクティビティモニタで確認することができます。 *アクティビティモニタは、アプリケーション > ユーティリティ の中にあります。 アクティビティモニタの「システムメモリ」の現在非使用中が無駄
Posted by kjweb | Posted in Mac, Webデザイン, html | Posted on 24-11-2011 Macを使ってWebサイトを制作していて一番不便と感じるのは、やっぱりIEの確認ですよね? IE6などの古いブラウザを無視して制作していいのであれば、全然問題ないのですが、まだまだ、そう言う訳にもいきませんよね。 特に私の職場では、WindowsXP SP1でIE6がメインになっているので、全然そういう訳にはいきません。。。 ということで、MacでIEの表示を確認する方法のまとめ記事を書いてみました。 確認は大きく分けて4つの方法 MacでIEの表示を確認する方法は、大きく分けて4つの方法があります。 (私が知る限りでは。。。) BootCampによるWindows環境で確認する方法 仮想のWindows環境で確認する方法 エミュレーターを使用
私の場合、人物を扱ったデザインをすることが多いのですが、写真をそのまま使っているとデザインがマンネリ化してきますよね。 そんなとき、人物を切抜いて、デザインにメリハリを付けたりするのですが、髪の毛を切抜くのは、なかなか面倒ですよね。 ついつい、多角形選択ツールなどで切抜いちゃったりします。 これでは、ベタな感じでクオリティが今イチですよね。 アルファチャンネルを使って切抜く方法が一般的?のようですが、アルファチャンネルってよく分からないですよね。。。(私だけ???) そこで、Photoshopの「背景消しゴムツール」を使って簡単でキレイ?に髪の毛を切抜く方法を紹介したと思います。 といっても、背景がある程度単色の写真素材に限定されますが。。。 (え〜 それじゃ意味ないじゃんってツッコまれそうですが。。。(>_ 髪の毛を切抜く手順 【1】ファイルを開く 切抜きたい写真のファイルを開き
ホントInstagramって、おもしろいですよね。 通勤中や出かけた場所で、必ずと言っていいくらい写真をアップしています。 Instagramユーザの皆さんもきっとそんな感じですよね〜きっと。 私は通勤や出かけた場所の写真が多いのですが、ランチの写真や夕食の写真なんかもよく見かけますよね。 大した写真ではないのですが、せっかく撮った写真なのでブログに載せようかな思ってInstagramを表示できるプラグインを調べてみました。 Instagramを記事やページに表示できるプラグイン insta.SHOW Instagram Embed insta.SHOW WordPress › insta.SHOW « WordPress Plugins 記事やページにInstagramをスライドショー表示させることができるプラグイン。 設定画面 設定は、ユーザ名、パスワード、コメントの文字サイズ、
Windowsの機能ですが、超簡単でビックリしたのでメモとしてのポストします。 連番のファイル名にしたいってことって、結構ありますよね。 職場では、ブログにたくさんの写真をアップするので、セレクトした写真を連番のファイル名にしたいと思っていました。 この方法を知らなかったので、そのままアップしていました。。。 Windowsの機能なので、知っている方はスルーして下さい。 ファイルの選択 連番のファイル名にしたいファイルをすべて選択します。 右クリックで「名前の変更」 選択した状態で、右クリック「名前の変更」を選んで、好きな名前を付けて、「Enter」を押します。 ここでは、「Photo」というファイル名で連番にすることにします。 これだと、「名前を変更」した最初のファイルは、番号がふられず、下記のようになります。 「Photo」「Photo (1)」「Photo (2)」「Ph
いつもDVDの映像を素材に使うとき、どのソフトで変換(エンコード)するか悩む。。。 Hand BrakeとかFFmpegXが一般的?で有名かなと思うのですが、使ってみると、Hand Brakeは、MP4とMKVの形式しか書き出せないので、Final Cut Proでは、不便。。。使えない。。。 Final Cut Proで都合のいいQuickTime形式にするには、もう一回変換する必要があるので時間がかかる。。。 FFmpegXは、QuickTimeに直接変換できるのですが、コーデックがmp4とXvidなので、Final Cut Proでレンダリングが必要になるので手間だったりします。 画質も今イチ納得できるものではなかったので、他に何かいい方法はないかと調べていたら「MPEG Streamclip」に出会いました。 Apple DV/DVCPRO -NTSCに、一発で変換できるの
Posted by kjweb | Posted in Google, wordpress | Posted on 13-06-2011 今後、どうなる分かりませんが、Google +1 ボタンを設置してみました。 ソーシャルの分野では、なかなか上手くいってないGoogleですが、この「+1」は、はたしてどうなることでしょうかね。 とりあえず、Google +1 ボタンを設置してみました。 設置方法 Google +1ををウェブサイトに表示 上記のページより、+1 ボタンの大きさなどをカスタマイズすることができます。 好みのサイズに設定して、コードを取得します。 【カスタマイズして生成された2つのコード】 <!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください --> <script type="text/javascript" src="ht
フォントをインストールすることは、よくあるのですが、あれ?フォントをアンインストールするのってどうだったかなと思い調べてみました。 すると、フォントのアンインストールもインストール同様のMacOSX標準アプリのFont Bookできるようです。 普段あまり使わないのでもう少しFont Bookについて調べてみました。 するとFont Bookはインストールやアンインストールだけでなくフォントの管理もできるスゴく便利なアプリだったので紹介したいと思います。 そんなこと知ってるよ!っと言う方は、スルーして下さい。 フォントのインストール・アンインストール、使用停止 フォントのインストール フリーフォントを入れることも良くあるのでフォントのインストール方法は大丈夫と思いますが、とりあえず紹介します。 Font Bookのメニューのファイル>フォントを追加… もしくは、歯車メニュー>フォン
Posted by kjweb | Posted in Photo, Photoshop | Posted on 21-05-2011 Webページやチラシなどで写真を使いたくても、写真が今イチなことって結構あると思います。 毎回プロのカメラマンに撮影してもらえればいいのでしょうが、そう言う訳にもいかないと思います。 そんな時に私がやっている写真を一眼レフ風にいい感じにする方法を紹介したいと思います。 ちょっと誤摩化し的なPhotoshopのテクニックになりますが、いい写真素材がないときに使えるかもしれません。 と言っても、全然大したことありませんけどね。 背景をぼかして、見せたいものをふわっと目立たせるだけ。 一眼レフで撮った写真は、ぼけが威力を発揮しています。 このぼけのおかげで、見せたいものがふわっと浮いて、いい感じの写真になります。 このぼけをPhotoshopで作ってみ
Posted by kjweb | Posted in Final Cut Studio, Mac, Photo | Posted on 31-03-2011 iPhotoは、写真管理アプリの中で、もっとも最強のアプリだと思います。 写真管理はもちろん、写真の色調整やスライドショー、SMSなど各種サービスへの連携も整っていて、ホント、スゴいアプリだと思います。 個人的には、主に家族の写真を管理しています。 しかし、仕事では、スライドショーを作り、ムービーにして、映像制作の一部として使っています。 仕事で写真をよく撮るので、それらを1年に1度、DVDビデオにまとめています。 ということで、iPhotoを映像制作に使う上で、私が注意している3つのことを紹介したいと思います。 その前に、簡単に制作環境を紹介しておきます。 制作環境 ・ iMac 20インチ 2.66GHz メモリ:4G
Webデザインやグラフィックデザインでも重要な素材になる写真。 写真の善し悪しで、仕上がりのクオリティーは全然違ってきます。 素材集の写真に頼って、制作している人も結構多いと思います。 素材集の写真を使うと、他のサイトでも使われていたりするので、どうしてもオリジナリティに欠けてしまいます。 とは言え、カメラマンを使うこともなかなか難しいですよね。 ならば、デザイナーがある程度、撮影できれば写真素材に悩まなくてよくなりますよね。 ということで、写真を上手く撮る基本的な3つのポイント+αを紹介したいと思います。 私もサイトやブログで使う写真を撮ることが多いので、そこで気を付けている3つのポイント+αを紹介したいと思います。 ポイント(1)【撮影の姿勢】 まず、撮影の姿勢から説明していきたいと思います。 脇を締め、カメラをがっちり体で固定する。 手ぶれ防止機能などが付いていますが、
Posted by kjweb | Posted in Mac, html | Posted on 19-01-2011 以前、DreamWeaverCS3にインストールした記事「DreamweaverCS3でZen-Coding!!」を書きましたが、普段使っているエディタ「TextWrangler」にも、Zen-Codingがあるようなのでインストールしてみました。 下記のページを参考にさせて頂きました。 TextWranglerのzen-codingの設定のメモ – E-riverstyle Vanguard TextWrangler用 zen-coding のダウンロード Zen Coding for BBEdit / TextWrangler — Angelwatt.com 上記のページのDownloadの「TextWrangler Zip file」をクリックしてダウンロード
twitterをはじめたせいか、最近、よくいろんな人のブログを見るようになりました。 みなさん、いろいろ工夫されていて、このブログ「WebDesign-memo」もそうした方々のブログを参考にさせてもらっています。 今回のこのプラグインも参考にさせて頂いたもの一つです。 参考にさせて頂いた記事 WordPressのサイドバーに人気の記事ランキングを表示するプラグイン『WP-PostViews』 | WordPressの使い方・インストールガイド WP-PostViewsとは ブログの記事のランキングを表紙するプラグインで、ウィジェットに特化したプラグインのようです。 WP-PostViews ダウンロード WP-PostViewsのインストール インストールは、いつものように、解凍した「wp-postviews」フォルダを wp-content/plugins にアップロードします。
Posted by kjweb | Posted in twitter, wordpress | Posted on 17-12-2009 ブログの更新をtwitterに流したり、1日のつぶやきの要約をブログで更新してくれたりと ブログをしているtwitterユーザにおススメなWordPressのプラグインです。 このTwitter Toolsをこのブログにインストールしてみました。 まず、ここからTwitter Toolsをダウンロードします。 この便利なプラグインを日本語化してくれている「Lovelog+*」さんのサイトから日本語化ファイルをダウンロードしてインストールします。 日本語ファイルのインストール方法は、「Lovelog+*」さんのサイトに詳しく掲載されていますので、参考にして下さい。 Twitter Tools2.0プラグインの日本語版配布 | Lovelog+* では
Posted by kjweb | Posted in Webデザイン, html | Posted on 20-03-2010 twitterで「知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた」という記事のつぶやきがあったので試してみた。 記事では、Apatana Studioを使用していたのですが、Dreamweaver版もあるようなので、それを試しにインストールしてみた。 そのメモです。 Zen-Codingのダウンロード まず、Zen-Codingをダウンロードします。 http://code.google.com/p/zen-coding/downloads/list ちなみに、Zen-Codingは、スタンドアローンのソフトではなく、プラグインという形で提供さています。 Apatana Studio、DreamWeaverの他に、数種
WordPressのアップロード容量制限を変更する方法(Xserver) Posted by kjweb | Posted in PHP, wordpress | Posted on 13-12-2009 管理しているブログ(WordPress)に、動画をアップロードできるようにと調べたことのメモ。 レンタルサーバにもよりますが、通常、アップロードできるファイル容量は、デフォルトで2Mとか5Mになっていると思います。 管理しているブログ(WordPress)は、レンタルサーバのXserverを使用していて、15Mまでのアップロードが可能になっていました。 写真などのファイルであれば、15Mもあれば、十分ですが、動画となるとちょっと足りない。 ということで、調べてみました。 すると、調べごとなどで、いつもお世話になっている、「IDEA*IDEA」さんの「WordPressのインポート機
とあるWebデザイナーの気になるあれこれをメモっていきます。ホントInstagramって、おもしろいですよね。 通勤中や出かけた場所で、必ずと言っていいくらい写真をアップしています。 Instagramユーザの皆さんもきっとそんな感じですよね〜きっと。 私は通勤や出かけた場所の写真が多いのですが、ランチの写真や夕食の写真なんかもよく見かけますよね。 大した写真ではないのですが、せっかく撮った写真なのでブログに載せようかな思ってInstagramを表示できるプラグインを調べてみました。 続きを読む » ブログを最後までお読みいただき本当にありがとうございます。 初めて当ブログに訪れた方も、何度か当ブログにお越し頂いている方ももしよろしければRSSリーダーの登録をよろしくお願いいたします。 ブログやInstagram経由のつぶやきが多いとは思いますが、Webやデザインのこともつぶやいて
このページを最初にブックマークしてみませんか?
『WebDesign Memo|とあるWebデザイナーの気になるあれこれ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く