はてなブックマーク

「Get quickly inspiration!」という文字通り、何かしらアイデア出したい時に参考になるサイトです。 パーツ毎に分類されているので、見やすくなってます。 意識してるのだと思いますが方向性の幅が広いのも良いですね。 Calltoidea 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトな

レスポンシブなSNSボタンのコードを生成できる「Reponsible Social Sharing Buttons」 アイコン部分はSVG形式になっています。これを元にアレンジしても良さそうですね。 Reponsible Social Sharing Buttons 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・

ハンバーガーメニューなどのアニメーションを生成できる「Transformicons」。 出来るものは下記の通り。 BUilderボタンより飛んで、生成したいものを選んでビルド。 すぐに使えるソースコードが生成されます。 Transformicons 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどの

Google Map を遅延ロードして読み込ませるjQueryプラグイン。（ Lazy-loading とか Lazy-load とか言うやつです） 遅延で読み込ませる事により表示速度の向上が見込まれます。 Google Map自体使う機会が多いので導入しても良さそうですね。 デモ画面は下記ボタンより。 Lazy-loading Google Maps demo Lazy-loading Google Maps — Osvaldas Valutis 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事

モバイル端末からの操作にも対応、全画面にも出来たりキャプション入れたり共有出来たりと機能も豊富なPhotoSwipe。 操作感もとても良い感じなので活躍する場面は多そうですね。 ライセンスはMIT。 PhotoSwipe: JavaScript Image Gallery 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツ

GoogleがMaterial Designという「ビジュアル言語」を発表しました。 http://www.google.com/design/spec/material-design/introduction.html Material Designは、古き良いデザインと、新しいテクノロジーを融合させ「ユーザーに分かりやすい」デザインを提供するための概念です。 Material Designを開くと、アニメーションで「あーしろ、こーしろ」、「余白を大胆に空けろ」など様々なことが書いてありますが、どのように実装するかについてはあまり触れられていませんでした。 そして今回紹介するのがMaterial Designの概念のもと作られた「Materializeフレームワーク」です。 そしてこちらが紹介動画です。 今後このフレームワークのように、Webサイトを作るための素材はどんどん出てくることだ

下記の動画Gifでは見えませんがローディングアニメもあります。 やりすぎると鬱陶しいのでページ数少ないサイトや、閲覧頻度の低いサイト向きですね。 Animsition · A simple and easy jQuery plugin for CSS animated page transitions. 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業

後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、WordPressの勉強会を主催したり、Webやデザイン系のセミナーで登壇しています。すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子（あんこ）好き。 よつばデザイン よつば手帖（ブログ） CO

Web上で予め用意されたテンプレート画像、文字を入力、エフェクトを設定していくだけで、html5、css、Javascriptでコードを書き出してくれる優れサイト。(※swfファイルも可能) なんとタイムラインで細かくも設定できます。プログラミングが苦手だけど動きを付けたい、ちょっとしたバナー制作にも重宝しそうです。 日本語テキスト入力には対応していません。 Create HTML5 Animation|Free Banner Maker

テンプレートを選んで、ドラッグ&ドロップでHTMLメールを作成出来る「BeeFree」がすごい。 使い方は直感でわかるレベルなので、スキルも不要。 スタートするとテンプレートが選べます。 リッチテンプレート。 ベーシックテンプレート テンプレートを選んで開くとこのような感じです。 右側のBlocksからパーツを追加する事も可能。ブロック（コンポーネント）単位で追加出来るのでそのまま使えます。 見たままで操作出来ます。わかりやすい。 追加出来るブロック デバイスに大きく左右されるHTMLメールに凝ったレイアウトは不要なのでこれだけあれば十分。 各ブロックのオプション。 背景色設定したり罫線設定したり余白設定したり。 一通り出来てセーブするとデータ一式をダウンロード出来ます。 ファイルの内容はこのような感じ。 画像部分をシネマグラフなんかで印象的なアニメGifを取り入れたりすればかなり良い感じ

レスポンシブなフロントエンドフレームワークFoundationを提供するZurbは、2014年8月21日に同社のブログでFoundationの新バージョン5.4とともに、Foundationのアクセシビリティを高めていくことを発表した。 ブログ記事では、多くのデザイナーがアクセシビリティについて語るようになってきていると指摘。アクセシビリティのないウェブサイトはスロープのない建物と同じ。W3CによるWAI-ARIAガイドラインなどに準拠したサイトをデザインすべきだとしている。 Foundationの各コンポーネントのドキュメントページには、それぞれアクセシビリティのセクションが追加され、どのようにマークアップすれば良いかが記載されている。たとえば、Topbarコンポーネントのアクセシビリティのセクションでは、role=”navigation” 属性を追加したり、オフキャンバスナビゲーション

ブロック要素の高さを揃えてくれる jquery.matchHeight.js レスポンシブでも動作するとの事なので良さそうです。 demo IE8以降 ロード後・ウインドウのリサイズ後に更新 レスポンシブ対応 ライセンスはMIT MITライセンス このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。 MIT License – Wikipedia liabru/jquery-match-height 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視

CSSを短く読みやすいように変換してくれるサイト「SHRTHND」。 オレオレ記法で書いている人の記述確認にも使えそうです。 SassやLessを導入してない人は、納品前の整形用途に使っても良さそうですね。 �SHRTHND 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業（ミラサポ）」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受け

このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。

ブラウザ用の小さなfavicon画像を設定しているサイトは多いだろう。しかし、iOSやAndroidのホームスクリーン、Windows8タイル、Windowsタスクバーなどに最適化した各種サイズのfaviconまで用意するのは多少面倒だ。このサイトを使うと、1つの画像から14通りのアイコン画像を自動で生成してくれる。 Website: http://realfavicongenerator.net/

手描きのスケッチをロゴにしてくれるサービスLogoshi。 下記のように適当に書いたスケッチが自動で変換されて右側のようになります。 価格はたったの5ドル。 ロゴは本来こんな風に作るものではありませんが、判別マークとしての役割で十分と考えてる人には良いと思います。 （ロゴは企業理念や社風やビジョンやブランド価値など様々な要素を検討のうえで作られるものです。） 実際にこのようなイメージに落とし込む見せ方は良いですね。 Logoshi – Sketch a Logo 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン（後藤賢司）は、中小企業庁「中小企業・小規模事業者ワンスト