はてなブックマーク

1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！ 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、

スマートニュース（SmartNews）風の表示とは 「スマートニュース（SmartNews）」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ！ 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース（SmartNews）風

今年10月からChromeでHTTP ページのフォームに「保護されていません」という警告が表示される 8月中旬に、Search Consoleから「Chrome のセキュリティ警告を示します」という件名のメールが届きました。 どうやら、今年10月からChrome(バージョン 62)でテキストフォームに入力すると、「保護されていません」という警告が表示されてしまうとのことです。 「テキストフォーム」とは、ブログでいうところの「お問い合わせ」や「コメント」、「サイト内検索」にあたるフォームが該当します。 さらに、メールには「長期的には、HTTP で配信されるすべてのページを『保護されていません』と明示することを計画しており、この新しい警告はその一環です。」とあるので、サイトをSSL(https:// )対応することは避けられない流れです。 というわけで、10月を目前に、今まで先延ばしにしていた

1. 使用フォント・サイズを決める いざ資料を印刷してみた時に、「なんだか読みづらい」と感じる資料だと商談相手に読んでもらえないかもしれませんよね。手に取った時にきちんと内容が伝わるよう、適切なフォントや文字サイズを知っておきましょう。 基本的にはゴシック体を使用する 明朝体は可読性（長い間読んでいても疲れにくい「読みやすさ」のこと）が高いフォントと言われていますが、媒体資料の場合は疲れが生じるほど長文になることはほぼありません。であれば、視認性（パッと見ただけでも認識できる「見やすさ」のこと）の高いゴシック体を使うのがベターです。 とは言っても、必ずしも明朝体を使うのがNGということでもありません。例えば、「BLOGOS」の媒体資料では、見出しや短いテキストに明朝体が用いられており、それによって媒体の洗練された雰囲気が強く印象づけられています。 基本的には資料にはゴシック体を用いたほうが

1.色々な媒体資料を見て研究する 「どんな媒体資料にしたいか」というイメージが固まっていないと、いざ作り始める時につまづいてしまいますよね。そのため、まず私は色々なメディアの媒体資料を見て研究することからスタートしました。 「どんな形式で作られているのか？」「自社メディアをどんな言葉で表現しているのか？」「アクセス数はどれくらいか？」「広告メニューや料金の見せ方は？」など様々な疑問を頭に浮かべながら、とにかくたくさんの媒体資料を見まくりました。 色々なメディアの媒体資料を見ることで、それぞれの事例が学べるだけでなく、自社メディアとの違いも浮き彫りになるため、自然とイメージが湧いてきますよ！ 媒体資料まとめ記事 研究する過程で発見した素敵なデザインの媒体資料や、自分なりに参考になったポイントをまとめた記事を書きましたので、こちらも併せて読んでみてください！ また、以下の記事も非常に参考になり

追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ

ブラー（ぼかし）エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです！この「ぼかす」表現を「ブラー（blur）エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの？」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします！ なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜！ CS

1. 絶対フォント感 「デザイナーからの挑戦状！」というコンセプトの間違い探し系ゲームアプリ。「最近、フォントを知らないデザイナーが増えてきた」というキャッチコピーがグサッときますね！ 収録されているフォントはモリサワの「リュウミン」やフォントワークスの「ロダン」などデザイナーには必須のフォントが盛りだくさん。 基本ステージはフォントの中から1文字だけ違うフォントを見つける間違い探し。最初は明らかにちがうものばかりですが、後半はよーく画面を眺めるか、フォントに精通していないとクリアが難しくなってきます。 他にも「覚えて当てて」や「マニアッククイズ」というミニゲームもあります！「覚えて当てて」は、フォントについてよく知らない人や、新米デザイナーに最適なゲームではないでしょうか。 逆に、「マニアッククイズ」は、フォントにかなり詳しい玄人デザイナー向けな印象を受けました。かくいう私も全然フォント

錯視とは 視覚調整について知る前に、まず「錯視」とはどういうものかについて触れておこうと思います。 先述したように、錯視とは端的に言ってしまえば「目の錯覚」のことです。人間の視覚は必ずしも正確ではありません。目で受け取った情報を、脳が勝手に推測したり補完することにより、しばしば実際の姿とは違うように見えてしまうことがあります。 例えば有名なものに「ミュラー・リヤー錯視」があります。以下の2本の矢印の横棒はふたつとも同じ長さですが、下の横棒の方が明らかに短く感じられるのではないでしょうか？ 上記の錯視についての解釈はいくつかあるらしいですが、どれも無意識に矢印の斜め線も含めて長さを測ってしまうためだったり、「下の矢印の方が遠くにある」と認識するためだったりと、受け取った情報を脳が自動的に補完してしまうことが原因とされています。 このように、たとえデザイン上のふたつの要素が全く同じ大きさや色で

シームレスにしたい画像を探す まずはシームレスにしたい画像を用意しましょう！シームレスである必要がないとなると、探す段階から選択範囲がグッと広がるんですよねー！ 今回はこの紙のテクスチャを使います！ 私がよく素材探しでお世話になっているのは、たくさんのテクスチャを配布してくださっている「フリーテクスチャ素材館」。高画質のテクスチャ素材があるので助かっています。素材の中にはもともとシームレスのパターン素材もありますよ！ 画像をPhotoshopでシームレスパターンにする シームレスにしたい場所を選んで正方形に切り抜き 画像の中からシームレスにしたい場所を選びます。テクスチャの中には陰影が濃いところと薄いところがあったりして色ムラがあるので、私はなるべく色あいが均等な場所を選んでいます。 今回は500pxのパターン素材を作りたいので、場所が決まったら「切り抜きツール」で画像を正方形に切り抜きま

仕上がりイメージ 表現したいのは以下のような５つ星のレーティング評価です。食べログやAppStoreなどのレビューでよく見かけますよね。星の数は0.5きざみで推移します。 このレーティング、スプライト画像で実装すると評価ごとにバージョンを量産する必要があったりと少し面倒です。しかも、やっぱり後から星の大きさや色を変えたい！なんてなった時にまた画像を作り直すのはさらに面倒。今回は、そんな手間を解決してくれたCSSでの実装方法を紹介します。 実装方法は以下の記事を参考にさせていただきました。本当にありがとうございます〜！こちらの記事では実際にスライダーを動かして星の数を操作することができるため、イメージがつかみやすいですよ！ CSS(Sass)での実装方法 以下が実装用のコードです！初めてCodepen使いました。便利ですね！ ※あとで説明しますが、管理が楽なのでSass形式で作っています。C

春はあけぼの、夏は夜…とくれば、「秋は夕暮れ」ですよね〜！というわけで、今回は夕空と紅葉がテーマのデザインです。11月いっぱいまで公開する予定です！今回もPC版しか作っていないので、スマホの方はPC版表示にして確認してみてくださいね〜！ 参考になる！美しい秋のデザインいろいろ 秋デザインを制作する時に参考になるWebサイトやポスター、グラフィックデザインなどを集めてみました！ 極彩の秋 紅葉の東部カナダ ファーストビューの写真が美しい「エア・カナダ」のプロモーションサイト。やっぱり秋デザインのキーワードといえば「紅葉」ですよね。赤・黄色・緑・茶色など様々な色を楽しめる紅葉は秋デザインには必須ともいえるモチーフなのかもしれません。それにしてもカナダでもこんなに美しい紅葉が見られるんですね！行ってみたい。 エア・カナダ【日本】カナダ・オンタリオ州、ケベック州とその近郊情報サイト「極彩の秋 紅葉

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

数年前までのゲーム関連サイト（国内） Flashを多用し、スマホ対応はされていなかった 少し前までは国内のゲーム関連のサイトはFlashを多く使い、派手なデザインが多かったように思います。個人的にはゲームの楽しさや世界観を伝えるのに「動き」はとても重要な役割を果たすと思うので、Flashの多用も仕方がないのかなと考えていました。 表示速度は遅くなりますが、今見てもFlashの動きをふんだんに活用して制作したサイトの世界観は圧巻だと思います。また、この時点ではスマホ対応されているサイトはそんなに多くありません。 ジョジョの奇妙な冒険 オールスターバトル アーシャのアトリエ?黄昏の大地の錬金術士? テラリア Flash離れが叫ばれてきている最近では、以前はFlashで表現していた動きのエフェクトも、違った技術で表現されるようになりました。また、スマホでの閲覧率も数年前より格段にアップし、スマホ

理想は「前へ」「次へ」だけのページネーション 私の理想のページネーションの仕様は以下です。 表示させるのは「次へ」「前へ」のリンクのみ 最初または最後のページの場合は、リンクを表示せずテキストのみ 仕上がりイメージはこんな感じ。ページネーションは、PC版では1,2,3…と数字で総ページ数がわかるようになっていますが、スマホ版のサイトでは数字だけのリンクを指でクリックするのは難しそうなので、「前へ」「次へ」だけのシンプルな作りにしました。 お世話になった記事 実装コードは、以下の記事を参考にさせていただきました！ありがとうございます！こちらの記事では前へ・次へボタンだけでなく数字のページネーションも出力される形式になっています！ 実装方法 ページネーション実装に必要な「$paged」と「$wp_query」 ページネーションを作成するには現在のページ値と全ページ数が必要です。まあ、なくても作

ブックマークレットとは？ ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん！」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。なので、ちょっとしたことをするならばブックマークレットを使ったほうがPCのメモリの節約になるのでオススメです！ サイト運用・分析に使えるブックマークレット あらゆるSNSでの反響がすぐに分かる！「ソーシャルてんこ盛り」 まずは私が１番お世話になっているブックマークレットである「ソーシャルてんこ盛り」。これ1つで気になるページのSNSでの反響をいっぺんに知ることができます！また、このブックマークレッ

【2015年6月11日 追記】file_get_contents()の使い方に注意しよう 重要なことでしたので追記します。こちらの内容はコメントにて教えていただきました。教えていただかなかったら全く知らない事実でした…本当にありがとうございます！ file_get_contents()は「allow_url_fopen =off」のサーバー環境では動いてくれない APIを取得する際に使用しているfile_get_contents()というPHPの関数には注意が必要です。まず、その関数が動かない環境があるということ。file_get_contents()を使うにはサーバーの「allow_url_fopen」の設定をONにする必要があります。もし設定がOFFになっている場合はfile_get_contents()が使えません！ ONにする方法としては以下の記事がわかりやすくまとめてくれていまし

内容について 本書は以下のような構成になっています。 CHAPTER1　目的に合わせたコーディングの環境整備 CHAPTER2　HTMLコーディング CHAPTER3　CSSコーディング CHAPTER4　最適化・検証 CHAPTER5　そのほかよく利用される技術・ツール CHAPTER1　目的に合わせたコーディングの環境整備 CHAPTER1ではNode.jsやRubyを用いた開発環境の作り方などが紹介されています。制作に入る前段階の開発環境を作るのって、大変ですよね。少なくとも私にとっては最もハードルが高い作業に感じます。 案件に何か新しい技術を取り入れる時は、Googleで検索しながら手探りで導入していただけだったので、ここでまとめて基本的なことを学べるのは助かりました。 例えば、私は仕事ではNode.js上で動作するgulpを使ってコーディング作業をしているのですが、導入する際には

テーマは藤と桜！ 春ということで、藤と桜をテーマにデザインしました！スマホ版は作っていないので、PC版で見てくださいねー！ お気に入りはactywayのあくちー(@actywav)さんが作成した桜のプラグイン！このテーマでは桜の花びらの色を変えて藤の花びらとして使用しています。藤の花が上から降ってくるイメージ。 サイトに桜を降らせることができるあくちーさんのスクリプトはこちらで配布しています！あくちーさん素敵なスクリプトをありがとうございます〜！ サムネイルサイズ変更にあたりPHPでデザインを切り替えて表示 テーマ変更にあたり、サムネイルのサイズを大きくしました。そうすると、サムネイルまわりのデザインも変わってしまうんですよね…。画像が以前より小さくなる分にはサムネイルを切り出して再生成すれば済む話なんですが、大きくするとなるとそうはいきません。途中からPHPでデザインを切り替える必要が発