サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
インタビュー
shiganakunai.com
Retinaディスプレイでも1倍サイズのキャプチャーを撮る方法 2014.03.30 アプリケーション MacintoshRetina 0 MacBook Pro Retinaでキャプチャーを撮ると通常の2倍サイズになります。 Web制作をしていると通常サイズで使うことが多いので縮小しなければなりません。少々手間です。 「MacBook Pro RetinaはWeb制作に不向き」と言われる原因の1つはこのためではないでしょうか。 RetinaCapture Retinaディスプレイでも通常サイズのキャプチャーを撮れるのがRetinaCapture（http://www.retinacapture.com）というフリーソフトです。 RetinaCaptureを起動すると3種類のサイズ（1倍・2倍・両方同時）、4種類の範囲（画面全体・タイマー・範囲選択・ウィンドウ）を選択できます。保存形式はP
IllustratorでPowerPointの資料を作る 2014.08.12 制作 AcrobatIllustratorPowerPointTips 1 「カッコいい資料作って！」言われIllustratorで作成したところ「編集したいからPowerPointで作り直して」と言われてしまった… そんな経験はありませんか？ デザイナーがOfficeを触る時間がそう長くないでしょう。デザイン性を高めるなら操作に慣れたIllustratorのほうが効率的です。しかし営業やディレクターが編集することを想定すると、ソフトのオーダーが無くてもPowerPointで作成するほうがベターです。 PowerPointでデザイン性の高い資料を作成するのは少々手間です。そこでIllustratorでPowerPointの資料を作る方法を紹介します。 Illustratorで制作する まずは通常通り新規ドキュメ
グラフィックデザイナーが作ったWebデザインをコーディングする、という案件を受けることがあります。 「デザインすること」については歴史が長いグラフィックデザイナーに一日の長があると思っていますが、Webにはグラフィックと違った特徴があります。 Webデザインを制作する際に知っておいてほしいことを挙げてみます。 タイポグラフィの制限 同じ文字でも、Webサイトには「画像」と「テキスト」が存在します。 簡単に区別すると、マウスカーソルで1文字ずつ選択できるものがテキスト、出来ないものが画像です。 画像はIllustrator・Photoshop等で制作したままの見た目を表示させることができますが、画像内に含まれる文章をGoogleなどに認識させにくいです。 テキストは情報をGoogleなどに認識させやすいのですが、フォント指定・装飾（袋文字や影など）・字詰めなどのタイポグラフィが苦手です。 画
Macの英語化と、アプリケーションの言語設定 2014.04.19 アイテム・周辺機器 アプリケーション IllustratorMacintosh 0 「Macを英語にすると早くなる」と聞いたことがあったので、最近は言語環境を英語にしています。 よく使う機能は覚えているし、分からない警告などは調べるようなったので英語に向き合う機会が増えています。 動作については、アプリケーションの起動やブラウザの動作が早くなったように感じます。 Macの言語環境を英語にする方法 環境設定の「言語と地域」で、優先する言語のEnglishを上にします。 Macをログインし直し・再起動をするとMacが英語化されます。 特定のアプリケーションだけ言語を変更する方法 多くのアプリケーションは複数の言語情報が含まれているようですが、Adobe製品は日本語以外での表示ができませんでした。 OSとアプリケーションで言語の
Dreameweaverのテンプレート使用時に、表示をbodyのidによって条件分岐させる記述。 まずはbodyのidを編集できるようにします。 <html> <head> <!-- TemplateParam type="text" value="" name="bodyのID" --> </head> <body id="@@(bodyのid)@@"> </body> </html> 次に<body>内に分岐の条件を記述します。 <!-- TemplateBeginMultipleIf --> <!-- TemplateBeginIfClause cond="bodyのid == 'toppage'" -->トップページ<!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="true" -->それ以外のページ<!--
Macで綺麗なアンチエイリアス無しＭＳ Ｐゴシックを使う 2013.01.09 アイテム・周辺機器 アプリケーション 制作 DesignMacintoshPhotoshop 0 僕が勤めている会社のマシンはMacです。社長がグラフィック出身ということでMacらしいのですが、スタッフ全員のマシンがMacの制作会社は珍しいかも？と思います。 MacとWindowsの違いで出る問題の1つがフォントのアンチエイリアスです。Webサイト閲覧時にテキスト部分に見た目の違いが出てしまいます。Macで気にせずWebデザインするとアンチエイリアス有りにしてしまいがちですが、クライアントや閲覧者のほとんどはWindowsなんです。 わしのパソコンでホームページ見たら、 デザインと文字の感じがちゃうねんけどどないなっとんねん！？ というトラブル防止（言われたことはない）のため、僕はテキスト部分をアンチエイリアス
｢CSS Nite in KOBE vol.1｣に参加しました 2012.10.09 セミナー・イベント CSS Nite 0 10月6日、CSS Nite in KOBE vol.1に参加してきました。 全国各地で開催されているCSS Niteの神戸版第1回目でした。 この日は神戸ITフェスティバルも開催されていて、そちらから移動してきた方も多かったようです。 CSS Niteは技術系の内容が多いのですが､今回は『Web制作者のモチベーションアップ』がテーマで、ディレクション・経営に関わる内容がメインでした。 森和恵さん 教えてみてわかった、新しいことを覚えるしくみ 普段Webに詳しくない方向けセミナーの講師をしている森さんは、様々な情報を収集・整理するのコツを説明されていました。 情報収集は継続して続けるものなので、何のツールで集めるか、どうやって集めるか、どこに集めるか、情報の取捨選
MacはOS自体のスクリーンショット機能が高性能で、Windowsと違ってサードパーティーのソフトを使わなくても色んな状態のスクリーンショットを撮ることができます。 しかし高性能な分ショートカットキーの数が多く、撮るときにどのキー使うんだっけ？と悩む事が多いです。調べてみるといくつかの方法があったのでまとめてみました。 画面全体を保存 今、画面に表示されている状態を撮ります。 メニューバー、デスクトップ、デスクトップアイコンなどが含まれます。 PNGファイルで保存 Command + Shift + 3 → クリック クリップボードに保存 Command + Shift + control + 3 → クリック 選択範囲を保存 撮る範囲を自分で決めることができます。 PNGファイルで保存 Command + Shift + 4 → クリック クリップボードに保存 Command + Shi
Illustratorで複数ページのPDFファイルを作る方法 2012.10.05 アプリケーション ディレクション 制作 IllustratorTips 1 ちょっと前に覚えたことメモ。 クライアント提出用に、複数ページの資料を作成することがよくあります。 これまで複数ページのPDFを作るときは、1ページずつIllustratorで作ってPDF保存して、最後にAcrobatで結合していました。ページ数が少ないとさほど気になりませんが、このやり方だと後から手を加えるのが超めんどい… もっと簡単な方法は無いか探していると、アートボードで複数ページの作る方法を知りました。 １.新規制作時にアートボードの設定をする 画面はCS6のIllustratorです。新規作成時にアートボードの設定ができます。 CS3のときは新規作成時に設定出来なかった気がします。CS4は触ったことないので知りませんが、C
自転車乗りにお勧め！かっこいいPCバッグ cote&ciel（コートエシエル） 2012.05.31 アイテム・周辺機器 Macintosh 2 ノートパソコンはどうやって持ち運んでいますか？ MacBook Air購入当初、僕はソフトケースとショルダーバッグに入れて持ち運んでいました。徒歩や電車であれば問題ありませんが僕は自転車移動がメインなので、体に負担のかかるショルダーバッグはあまり向いていません。 自転車をこぎやすさ、中身の安全面を考えるとリュックサックタイプがベストです。だけどビジネスライクで地味だったり、機能重視で無骨なデザインはイヤ！！ そんなとき、よく行くショッピングモールでとてもいいバッグを発見しました！！ 亀の甲羅のような形のちょっと変わったこのバッグ。 cote&ciel Laptop Rucksack（コート・エ・シエル ラックトップリュックサック） といいます。
ウェブデザイナーの皆さん、何のアプリケーションでデザイン作業をしていますか？ 色んなアプリケーションがありますが、僕と僕の会社はPhotoshop派です。 いろんな方のブログを読んでいるとFireworksもなかなかの評判のよう。 試しに使ってみるとPhotoshopにもIllustratorにも似ていて、レイアウト構成はPhotoshopより格段に使いやすく感じました。 Fireworksの特徴 Dreamweaverと連携が良い ベクターデーターを扱いやすい 保存形式がpngなのでデーターをそのまま画像として使える 角丸率の修正が可能 ページ機能 調べてみるとこんなに利点があるんですね！テキストの処理や素材の豊富さはPhotoshopに分がありますが、 使いこなせばFireworksのほうがスムーズに作業できそうな気がします！！ しかし慣れとは恐ろしいもの…Photoshopでやってい
先日、新しい会社の名刺をもらいました。肩書きはデザイナーです。 以前から肩書きについて考える機会があり前の名刺では『クリエイター』にしていましたが、グラフィック出身の社長と色々話をしていると今まで幅広く考えていたつもりのことでもまだまだ他の見方があるんだなーと感じました。 肩書きについても同じで、 『Web業界の枠で考えるか』『Webより広い枠で考えるか』『対クライアントで考えるか』など 誰の目線にするかによってどう名乗るのがベストなのかも変わってくると思いました。 聞いた話のまとめと、自分の考えを整理するために図にしてみました。 何かの分子構造みたい（笑） 図の上が上流工程、下が下流工程で、そして上に行くほど絶対人数が少なくなりがちだと思います。 これは制作会社側の担当図ですが、社内に担当がいなかったり、兼任していたりと会社や案件によって違いがあると思います。 それぞれの肩書きと役割 営
JavaScriptで高さを取得計算後、別の要素に指定 2012.05.27 制作 CodingJavascriptjQuery 0 先日、とあるサイトの改善デザインとコーディングをしました。 そのときにJavaScriptの書き方を調べたのですが、また使う機会があるかもしれないのでメモです。 改善したページはECサイトの購入画面で、商品のオプションを選択する画面です。 ブロック1からオプションを選び、ブロック2には選んだオプションが表示されます。ブロック3にはオプション金額の合計と、次のステップに進むボタンが入ってます。 オプション選択は下向きに選んでいくのに合計金額やボタンが上部にあります。 なのでオプション選択後、次のページに進むにはページ上部に戻らなければなりません。わかりにくいしめんどくさい。 いくつか案を出して、下図のように改善方法に決定ました。 ブロック3をスクロールに応じて
先日、Facebookのウォールにこんなスライドが流れてきました。 コーディングが上達するコツ 内容を勝手にまとめさせていただくと… 構造を考えながらスライスする 大枠からコーディングし、細かい部分は後回し classやID名をルール化 Zen-Cordingやfirebugなどのツール活用 古いブラウザ対応（特にIE）の知識をつける コーディングに詳しい知り合いを作る といった感じだと思います。 僕もコーディングすることが多いので、この内容には共感できました。 また僕なりに実行・挑戦している効率化方法もまとめ直してみました。 Dreamweaverを使いこなす 僕はDreamweavrでコーディングしています。 複数の人で作業をすることを想定すると、テンプレート機能はとても便利です。 スライド内では『改行コード・文字コード等の理由からDreamweaverの使用は非推薦』とされていますが
コーディングが楽になるDreamweaver拡張機能 2012.05.15 アプリケーション 制作 CodingDreamweaverTips 0 ウェブサイト制作に欠かすことのできないHTMLエディタやオーサリングツール。いろんなソフトがありますが、現場で最も使われているのはAdobeのDreamweaverではないでしょうか。 HTMLの知識は勿論のこと、Dreamweaver独自の機能を使いこなせるかどうかが効率化のポイントだと思います。テンプレートを始めとした機能を把握することで、より効率的なコーディングが出来るようになるでしょう！ しかしAdobeは値段の割になかなか新しい機能が追加されません。 「あと少し」が足りないAdobe製品…ですが有志によって制作された拡張機能を追加することでDreamweaverがより便利になってくれます！ 今回は僕がいつもお世話になっている拡張機能を
このページを最初にブックマークしてみませんか？
『SHIGANAKUNAI』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
