はてなブックマーク

Photoshop 素材 PhotoshopなどのCreative Cloudと連携できるストックフォトサービス「Adobe Stock」を使ってみましたのでご紹介します。 Creative Cloudデスクトップを開くと、いつも「10点の無料のAdobe Stock画像を取得できます」と表示されることもあって気になっていた「Adobe Stock」。 今さらながら、初月無料（無償体験版）を申し込み（〜解約）してみましたのでまとめておこうと思います。 以前から、年間契約の「通常アセット 10点／月」が初月無料だということで、申し込み画面にも「初月のうちは解約料がかかりません」と書いてあるので試してみたいという思いがありました。ただ、やっぱり継続するにはいまひとつ、とか思った際には無料期間だけで終わりたい思いもあります。そのため、解約についてささっと調べてみると「初月のうちに解約手続しても解

SNS Web コーディング Facebookをサイトに埋め込むための「ページプラグイン」をレスポンシブ対応（横幅可変）する方法のまとめです。 Facebookのページプラグインを埋込むこと自体はとても簡単ですが、埋込みコードそのままでサイトをレスポンシブにすると横幅が収まらなかったり狭すぎたりとうまくいきません。 私の場合は、PC版の方が埋込みの最大サイズである幅500pxだったため、スマホの画面に収まりませんでした。調べてみたところ、とても簡単にレスポンシブ対応できることがわかりましたので備忘も兼ねてメモしておきます。 1.まずはプラグインを生成 Facebook for Developers（開発者向けFacebook）のページプラグイン生成ページでデザインに合わせた幅や高さなどを設定します。 その際、「plugin containerの幅に合わせる」のチェックボックスに必ずチェック

WordPress まとめ デザイン フォント まだまだ敷居の高い日本語Webフォントですが、商用でも無料で使える「プロ品質のフォント」を配信しているサービスについてまとめてみました。 ※この記事は過去の記事に加筆修正したものです。 Webフォントが注目されて久しいですが、英語などの1バイトフォントとは比較にならないファイルサイズの重さや、フリーで使えるフォントの少なさなどからまだまだ敷居の高い日本語Webフォント。特に商用利用となると、その性質からますます選択肢が狭くなってしまいます。 月額費用を払って有償の日本語Webフォントサービスを使えばよいという話かもしれませんが、個人事業や小規模事業者さんではなかなかそのランニングコストを捻出するのが難しいのが現実だと思います。そこで、実務で使える品質がありながらも商用利用でも無料で使えるサービスを調べてみましたので、備忘も兼ねてまとめておきま

Illustrator アプリ デザイン Adobe Illustratorで「バウンディングボックスのリセット」が効かない場合の解決方法です。 Adobe Illustrator（CC 2015）で「バウンディングボックスのリセット」がグレーアウトになってしまい、少しはまってしまいましたが、解決方法がわかりましたのでメモしておきます。 したかったことと陥った状況 トランプのスペードのような縦に長い菱形を作ろうと思い、長方形ツールを使って、まずは正方形を作成しました。それを45度回転した上で、「バウンディングボックスのリセット」、横方向を縮めれば簡単にできあがるはずです。 まずは正方形を作成。 45度回転させて、バウンディングボックスのリセット… なぜだか分かりませんが、グレーアウトされていてリセットできません。このままでは先に進めません…。 当該オブジェクトを選択して［オブジェクト］-［

まとめ デザイン フォント デザイン業務にも使える、高品質なサンセリフのラウンド体欧文フォントのまとめです。 サンセリフ系のラウンド体、わかりやすく言うと丸ゴシックの欧文フォントの中から、商用利用が可能なフリーフォントをまとめてみました。 Bariol Thin、Light、Regular、Boldとそれぞれのイタリックがファミリーとして揃っていますが、その内 RegularとRegular Italicが「Pay with a Tweet」で無料でダウンロードできます（ツイートすれば無料）。 Thin、Light、Boldとそのイタリック体は合計420円（1ユーロ/140円換算）〜とリーズナブルに購入できますので、買ってしまってもいいかもしれませんね。 Bariol Blogger Sans もともとWebサイトの見出し用として開発されたフォントだということで、手書きのニュアンスが活かさ

「xxxxx…」はBase64化されたデータの文字列を示しています。 上記の例はPNG画像の場合ですが、JPEGを埋め込む場合は「data:image/png」の部分を「data:image/jpeg」としてください。 ※書式について、「png;base64」の部分の記述について「;」が「:」になっているミスがありましたので修正しました。ご指摘いただいたAC様、ありがとうございます。 Base64への変換 Macの場合はデスクトップにエンコードしたい画像を保存し、「ターミナル」で以下のコマンドを実行すればOKです（hoge.pngは任意のファイル名）。かなり長い文字列が生成されるはずですので、まるまるコピーします。 とはいえ、個人的にはコマンドラインに少々拒絶感があるのでさらに調べてみると、ChromeのDeveloper Toolsを使ってカンタンにエンコードできることがわかりました。

調べてみた とりあえずいろいろと調べてみたところ、以下のページが参考になりそうでした。 参考：Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる ただ、私の場合は閉じタグコメントを右側につけたいので、以下のページも参考に。 参考：【2015年度版】今更！Sublime Textの痒いところに手が届く設定たち AtomでのEmmetのカスタマイズ方法はこちらを参考にさせていただきました。 参考：Emmetのカスタマイズ（Atom講座） 上記ページの内容を組み合わせれば、なんとかなりそうです。 設定方法 ということでわからないなりに頑張ってみたところ、以下のようにすることで実現できました。 1.環境設定を開く まずはAtomの「環境設定」画面を開き、左メニューの「パッケージ」をクリック。 インストール済のパッケージ画面上部のテキストボックスに

Illustrator アプリ デザイン AIファイルに埋め込まれた画像を元のサイズで取り出す方法です。 Illustratorで原稿の入稿があり、画像が全部埋め込まれていて困ったことはないでしょうか？ つい先日も、とある案件でAIファイルに埋め込まれた状態で画像が届き、きれいに取り出せずに困ってしまいました。抽出方法を調べましたので、今後のためにメモしておきます。 調べてみたところ、3つの方法があるようです。 SVGで保存する方法 SVG形式で別名保存をすると、AIファイルに埋め込まれていた画像が個別に書き出されます。ただ、SVGがWeb向けの規格であるためだと思いますが、CMYKの画像もすべてRGBに置き換えられます。 手順は以下の通りです。 ［ファイル］メニュー →［別名で保存…］ 「別名で保存」ダイアログでフォーマット「SVG」を選択 「SVGオプション」ダイアログの「画像」参照方

「Facebookページ」へのいいね！（Like）ボタンを設置する方法、そしてFacebookアプリの権限委譲の方法まとめです。 Facebookのいいね！ボタンには、「Facebookページ」へのいいね！と「サイト」へのいいね！がありますが、「Facebookページ」へのいいね！が少しばかりややこしいので自分用にメモ。 いいね！ボタン設置にはFacebookアプリの作成が必要ですが、Facebookページ管理者に代わってアプリを作成し、アプリの権限をページ管理者へ委譲する方法も含めて書いておきます。 いまいちよくわからないなりに触ってみた結果ですので、もしかすると別の方法があるかもしれませんが、その点はご了承ください。 なお、Facebookページ自体は既に作成済み（運用中）の前提で書き進めますので、予め用意しておいてください。 1.Facebookアプリの作成 まずはFacebook

藤原定家の筆跡をヒントにデザインされた、Adobeの「かづらき」というフォントがステキでしたのでご紹介します。 デザインの幅を広げようと思い、いろいろなフォントを見ていたところ、Adobeの「かづらき」（Kazuraki SP2N L）というフォントに出会いました。 2010年に最初のバージョンがリリースされており勉強不足がバレてしまいますが、ステキでしたのでご紹介します。 「かづらき」は鎌倉時代の歌人、藤原定家の筆跡をヒントにデザインされたそうです。デザイナーは「りょうゴシック」などで有名な西塚涼子氏です。 一般的には仮想ボディという正方形のグリッドにあわせてデザインされますが、「かづらき」ではこのグリッドにとらわれず一字一字自由にデザインされており、ただ流し込むだけでもまるで肉筆のような筆の流れが感じられます。 また、欧文では一般的ですが、日本語としては珍しい合字が導入されているので、

SNS Web コーディング Facebookのシェアボタンをオリジナル画像にカスタマイズして設置する方法をメモ。 ツイートボタンをオリジナル画像にする場合などもそうでしたが、設置方法をすぐ忘れてしまい、毎回のように調べるところからやっているような気がします…。 そういう暮らしとはさよならしたいので、備忘としてメモしておきます。 1.はじめにprefix／xmlns まずは、以下の呪文を唱えておきます。 HTML5の場合

セレクトボックス（select要素）のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を整えることができるようなので機会があれば試してみてはいかがでしょうか。 <div class="select-box01"> <select> <option value="">セレクトボックス01</option> <option value="">選択肢01</option> <option value="">選択肢02</option> <option value="">選択肢03</option> <option value="">選択肢04</option> <option value="">選択肢05</option>

Photoshop デザイン 素材 運動会やパーティーなどでよく見かけるような三角の旗（フラッグガーランド）をPhotoshopで簡単に作る方法です。 もしかすると既にご存知かもしれませんが、Photoshopで簡単にガーランドを作る方法を発見しましたのでご紹介します。この方法を使えば、カラーの変更や拡大・縮小、カーブの調整もスムーズです。 ちなみに、三角の旗のことを「ガーランド」って言うんですね！今回、妻に教えてもらうまで名前があるなんて知りませんでした。 1.ペンツールでパスを描く まず、Photoshopでカンバスを用意します。 その上で「新規パスを作成」し、ペンツールで適当なカーブを描きます。 後でいくらでも調整できますので、ひとまずは自分のイメージでザックリと描けばOKです。 2.文字ツールで旗をつくる パスが描けたところで、横書き文字ツールに切替えカーソルをパスの上に移動します

jQueryを使って、ウィンドウ下部に固定（FIX）させたメニューを下からスライドインさせる方法です。 ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。 上部のメニューと違って少し目立ちにくいので、存在を強調するギミックの一つとして有効だと考えられます。 Windows/MacのChrome38、Firefox33、WindowsのIE7〜11、MacのSafari6.1で動作確認をしています。 HTML <div>コンテンツ内容</div> <div id="nav"> <div class="inner"> <ul> <li>Home</li> <li>Products</li> <li>Support</li> <li>Contact</li> </ul> </div> </div>

おすすめ書籍 シンカーデザイン｜sincar design design Edgeは、関西を拠点に活動しているデザイン事務所 sincar designが運営しています。デザインツールの Tipsや HTML / CSS / JavaScriptに関するメモ、デザインの過程で思ったことなどを書き留めています。

デザイン フォント 前回、商用利用可能な欧文フリーフォントをご紹介しましたが、フリーフォントだけでは思い通りのデザインが難しいのも事実。 そこでおすすめしたいのが「TrueTypeフォントパーフェクトコレクション」です。現在は第6版。私の手元にあるのは何年も前に購入した第4版ですが、今も実務でバリバリ使用しています。 Bitstream社製のTrueTypeフォントが500書体も収録され、10年以上も前から改定を重ねて販売され続けている本です。プロのデザイナーがよく使う何万円もするような高品質のフォント、例えばGill Sans、Frutiger、Helvetica、Universなどが当たり前に入っています。BoldやItalicなどなどファミリーで揃っているのもポイントです。それにもかかわらず非常に高いコストパフォーマンスで、貴重な時間を使ってフリーフォントを探す前に、まずはこの本を買

Twitterのツイートボタンを設置する機会がありましたので、自作のオリジナル画像にする方法を備忘も兼ねてまとめておきます。 独自の画像を使用したボタンの設置は過去にも経験がありましたが、あまり機会がなくすっかり忘れていました…。今後のためにもここにメモしておきますので、デザイン重視でのWebサイトを作成など、ボタンをカスタマイズする際のご参考になれば幸いです。 基本的な構造は以下ソースの通りです。 HTML <a href="http://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】" onClick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolb

CSS HTML Web コーディング CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過（フェードイン）できますが、マウスアウトした時にフェードアウトする方法です。 HTMLのソースは以下の通りです。 HTML

JavaScript Web コーディング とある案件でカルーセル（スライドショー）を使うことになったので、これを機会に使いやすいjQueryプラグインを探してみましたのでご紹介します。 まずはネットで口コミを見てまわり、評価の高そうなものの中から探してみました。 できればこの先しばらく使っていきたいという思いもあったので、いくつか条件を設けました。 レスポンシブ対応 スマホなどでのスワイプ操作対応 オプションをカスタマイズしやすい IE7対応 Owl Carousel いろいろ見ていく中で、最初に有力候補に上がったのが「Owl Carousel」でした。 上の条件にも当てはまり、CSS3 Transitionに対応したブラウザであれば、スライドだけでなく様々なエフェクトで見せることが可能です。 ただ、検証してみるとChromeとIE11でエフェクトが効きません。FirefoxやSafar

まとめ デザイン フォント 無数に公開されているフリーフォント。 フリーフォントといっても、仕事で使おうと思って探してみると、意外と商用利用できないものが多いことに気付きます。また、デザインのクオリティも様々です。 これまでに個人的な目線でダウンロードしていた「商用利用可」を謳っている欧文フリーフォント約40点の中から、10フォントを選びました。 サンセリフ系 Archive ディスプレイ（見出しやタイトルなどのように大きく扱う）向けのデザインです。 角が丸みを帯び、重心もやや低めで少し柔らかい印象です。 Archive FRANCHISE こちらもディスプレイ向けのデザインです。 CやSの始点・終点が斜めになっているなど、強く、キレのあるデザインです。 FRANCHISE League Gothic 字幅の狭い、太めのサンセリフフォントです。 Regular、Italicと、さらに長体の