こんにちは。 またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。 うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。 グラデーション Ultimate CSS Gradient Generator サイトへ 以前からこちらを使用させていただいています。 使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ 操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへ グラデー […]
こんにちは、工藤です。 そろそろ関東圏はどんどん気温が上がってきましたね。そしてビールがのみたくなります よね？ 弊社サービスのノミトモもそろそろ賑わう時期です。 今回はビールのブランドサイトを集めてみました。 一番搾り – キリン サイトへ 筆で描いたようなイメージが印象に残りますね。雰囲気が出ていてとても素敵です。 ちなみに工場見学で一番搾り麦汁をのんだのですがすごく甘くておいしかったです…。 夏いちばん – オリオンビール サイトへ 夏季限定のビ […]
こんにちは、工藤です。 今回はさりげなく悩んでしまうタイトルのデザインを集めてみました。 ベネッセグループ ベネッセグループ なんばパークス -NAMBA PARKS- なんばパークス -NAMBA PARKS- 英語を使っていても日本語の表記がとなりにあるとうれしいですね。 OPEN-WORLD-ACADEMY OPEN WORLD ACADEMY 斜めの線でクールな印象を受けますね。 武蔵野美術大学 武蔵野美術大学 山崎医院 山崎医院 猿田彦神社 猿田彦神社 株式会社リラ […]
こんにちは、工藤です。 今回はアイコンやイラストをあしらったメインナビゲーションを集めてみました。 01.倉敷芸術科学大学情報発信サイト「つなぐ」 倉敷芸術科学大学情報発信サイト「つなぐ」 アイコンがテキストより大きめです。 マウスオーバーをするとまたちょっと雰囲気の違った画像を見ることができます。 02.渋谷再開発と東急建設 渋谷再開発と東急建設 03.Joha Joha デンマーク発の子供服などを扱うサイト。イラストからマウスオーバー・クリックした際の動きもかわいいです。 […]
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかってしまったことがいくつかあったのでメモです。 <p>要素が指定した幅に広がらない 原因はおそらくその時のviewportの指定の仕方です。 例えば<p>要素が『100%』としても横幅いっぱいに広がらず、勝手に折り返しされてしまうことがありました。 対策としては『background』の要素を指定してあげると指定したサイズになりました。 背景が白い要素でしたら『backgr […]
こんにちは、工藤です。 前回が探していて楽しかったので今回はスマホサイトのログイン画面を色々見てみました。 スマホサイトではプレースホルダに注目しながら集めてみました。 プレースホルダを使用していない例 プレースホルダを紹介していない例です。 スマホサイトだと情報量が多い場合に高さを少しでもとってしまうことが難点ですが、ユーザーの立場からすると入力後の確認で正しい情報を入力できているかわかりやすいですよね。 ウィメンズパーク 会員IDのみの保存・両方の保存どちらか選ぶことがで […]
こんにちは、工藤です。 気付けばもう3月でした。今年度の就職活動は3月1日解禁だったり私が学生だった数年前とまた変わってるんですね。 とてもこだわりのあるものがあって見ていて楽しいので今回は気になった採用サイトを集めてみました。 ※2016年3月10日時点の情報です。 ARDEN HOUS [サイトへ] イラストが効果的に使われていてとてもかわいらしいです。 電通 [サイトへ] 電通の採用サイト。気になるカードをめくっていきます。おしゃれ・・。 フジフーズ [サイトへ] ピン […]
こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。 Nikebetterworld Parallax Effect Demo [配布サイト][DEMO]パララックスのプラグインでも代表的なものの1つ、とい […]
こんにちは、工藤です。 ほぼ自分用…な気もしますがライセンスなどの確認用に気になるフリーフォントをあつめました。 前回も紹介しましたが足りなかったり、増えたりしたので…。 参考になったらうれしいです。 フォントを提供してくださっている皆さま、いつもありがとうございます。 フリーフォント（日本語/ゴシック体） Mgen+ (ムゲンプラス) [Mgen+ (ムゲンプラス)] Adobe から新たにリリースされたオープンなフォントである「源ノ角ゴシック」で漢字を補って作成されたフォ […]
こんにちは、工藤です。 今回は配色ツールについてまとめました。 Adobe Color CC [Adobe Color CC] Adobeが提供する、カラーテーマを作成できるツールです。以前はAdobe Kulerという名前でした。 Adobeのアカウントを持っていればカラーテーマの保存もできますし画面下に『検索』という項目があるのでそこから公開されている他の方の配色を見ることもできます。 またiPhoneアプリも用意されており、写真から色を抽出したり、Creative Cl […]
こんにちは、工藤です。 Webデザインのギャラリーサイトをご紹介します。 今回は国内サイトのみです。 I/O 3000 http://io3000.com/ 日本語サイトではありますが、集めているサイト自体は国内外問わずまとめられています。 カテゴリーや色で分けられているのはもちろん、独自のタグなども設定されているので目当てのサイトを見つけやすいです。 MUUUUU.ORG http://muuuuu.org/ 縦長のレイアウトのサイトが集められています。 こちらも日本語サイ […]
こんにちは、工藤です。 今回はパララックスを効果的に使用しているなあと感じたサイトを集めました。 LIX http://lixpen.com/ 「LIX」という3Dプリントペンの紹介サイトです。 スクロールしていくとサイトの中央に引かれていく線が印象的です。 Nikon 1 AW1 – Present Campaign http://shop.nikon-image.com/nikon1/nikon1aw1/ Nikonによるカメラの紹介ページです。 防水機能を謳 […]
こんにちは、工藤です。お久しぶりのブログの更新です。 今回はデバイスモックアップ素材をまとめさせてもらいました。 フリーのものを選んでいますが規約などは各ページのご確認をお願いします。 リアル系イラストのモックアップ素材 リアル系イラストのモックアップ素材です。 使い勝手が良いのでどんなサイトにでも合わせることができます。 Responsive Showcase Mockup Pack http://medialoot.com/item/free-responsive-scr […]
こんにちは、工藤です。 今回は黒・グレーを効果的に使ったサイトをまとめました。 東北大学大学院理学研究科・理学部 http://www.sci.tohoku.ac.jp/ マージンの取り方が絶妙で、学校のサイトは情報が多いと思うのですがそれを単色できれいにまとめているのが本当にすごいです。 コンバースオフィシャルサイト http://www.converse.co.jp/ コンバースのサイトです。靴自体がカラフルなので写真がとても映えるなと思います。 Mercedes-Ben […]
こんにちは、工藤です。 毎日暑いな～と思っていたら一気に季節が秋になってしまいました。 涼しくなったら美術展に1回は行こう、と決めているので調べてみました。2014年9月現在の情報です。 オルセー美術館展 印象派の誕生 ―描くことの自由― http://orsay2014.jp/index.html 2014年7月9日（水） – 10月20日（月） 10:00-18:00 金曜日は20:00まで パリのオルセー美術館の名画84点が展示されるそうです。モネの温かい油 […]
こんにちは、工藤です。 個人的になのですがTumblrのカスタマイズが気になったので調べていました。 Tumblrって？ ブログとtwitterのちょうど中間のようなサービスです。 手軽に文字や画像を投稿できますしtwitterのRTのように他の人の記事を共有出来たりします。 （リブログといいます） また、ユニクロのスペシャルサイトなどもタンブラーでつくられていたり企業サイトなどでも結構使われたりしています。あとはwikipediaでどうぞ。 テーマのつくり方に関しては分かり […]
こんにちは、工藤です。 今回はログイン画面のデザインを調べてみました。 何気ないんですけれど実はよく見る画面なのでもっと意識しないとなーと思うのですがつい後回しにしてしまったりします・・。 サムネイルクリックでログインフォームに飛びます。 シンプルなログインフォーム シンプルな背景に、ログインフォームが中央においてあるタイプです。 最近はフラットなものが多い印象があります。 evernote Rdio Simple magisto wordpress Google Favor […]
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 テーブルデザイン Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co […]
こんにちは、工藤です。 モーダルウィンドウについて調べるがあり、いい機会なのでまとめてしまいたいと思います。 モーダルウィンドウとは？ ちなみにモーダルウィンドウとは図で説明するとこんな感じです。 なんとなく見たことがあります・・よね？詳しい事はwikipediaで。 jモーダルウィンドウ プラグイン lightbox2 http://lokeshdhakar.com/projects/lightbox2/ モーダルウィンドウと言ったらコレかなと思います。 完全に初心者だった […]
こんにちは、工藤です。 今日はwebサイトでよく使いそうなアイコンをつくりました。 ある程度はストックしてあったりするのですが色々アイコンを見て回るとこういうテイストでつくりなおしたい！となって結構キリがないですね・・。 なかなか16pxあたりの表現もいまだにつかめていなかったりするのでもっといろいろなものを見てつくらないとなと思います。 一応fireworksのpngで作成しているのでもし使っていただけるならご自由にどうぞ。 それではこのあたりで。
こんにちは、工藤です。 梅雨が明けてもうすっかり夏ですね。暑いです。 今日は背景素材を無料で提供してくださっているサイト様のご紹介です。 パターンテクスチャなんかはたまに自作するとはまったりするのですがたくさんの種類を作るとなると心が折れてしまったりするので、無料で使わせていただけるのはありがたいです。 Subtle Patterns WEBサイト 背景画像と言えばここかなというぐらい高品質な素材を配布してくださっています。 基本的にシンプルなものが多いので微妙にアクセントが […]
こんにちは、工藤です。 今回はjQueryのスライドショーを集めさせていただきました。 ひとえにスライドショーといっても表現がまったく違うのでみてるだけで面白いです。 bxSlider http://bxslider.com/ 「jQuery bxSlider」で検索すると上位に出てくるスライドショーです。 私も何回か使用せさせていただきましたが、レスポンシブ対応しており、様々なオプションが用意されているのが非常に便利なのでスライドの動きに悩んでいるならこれがお勧めです。 F […]
こんにちは、工藤です。 Webデザインのときに私がよく使うChromeの拡張機能をご紹介したいと思います。 無駄にウィンドウを開いておくことが多いため、ブラウザ上で色々出来るのは本当助かります・・。 Awesome Screenshot Chrome ウェブストアへ 例えば「ここのフォントサイズを変えたらどうなるんだろう？」とふと思ったときに、ブラウザ上で試しに編集をして確認をできたりするのが『Firebug』です。もちろん保存はできないです。 firefoxにも『Fireb […]
こんにちは、工藤です。 今回はwebデザインに欠かせない、商用利用可のフリー素材を配布してくださっているサイト様をまとめました。 利用規約等は各サイト様でご確認いただければと思います。 写真素材 イラスト素材 アイコン系素材 写真素材 写真素材 足成 http://www.ashinari.com/ とにかく扱っている写真の種類が多いサイトです。 ここを見るとだいたい欲しいな、と思っている風景写真に出会うことができるのでありがたいです。 PAKUTASO/ぱくたそ http: […]
こんにちは、工藤です。 ただいまレスポンシブの勉強中・・というか効率的な進め方を模索中です。 それぞれ1つのファイルで済む分、ソースが汚くなってしまったりUIの面で悩んでしまったり、なかなか難しいです。 そんなこんなで今回は参考にしたいレスポンシブのサイトを集めさせていただきました。 日本語サイトのみのご紹介です。 参考にしたいレスポンシブのサイト ゆい動物病院 http://yui-ah.com/ ウィンドウを小さくしてもテイストが損なわれないのがすごいです。 項目もそれぞ […]
運営会社:株式会社8bit
制作サービス
運営サービス
