Webサイトを作る際に超参考になったデザインのサイトまとめ - Qiita
はじめに 仕事でWebサイトを作った際に、 デザイン案で非常に参考にさせて頂いたサイト様をまとめました。 Parts. SaaSのサービスサイトやLPを中心としたデザインの参考サイトです。 部分ごとにパーツやセクションごとのデザインが載っているので、 探しやすくとても参考になりました。 動くWebデザインアイディア帳 「動かしたいパーツ」ごとの逆引きリストを扱っているサイトです。 機能的 or 印象的で有効なデザインが多数載っており参考になりました。 ※注意として 動くWebデザインアイデア帳のサイトは、書籍に明記している通り「3年間の期限付き」です。 （※書籍の売れ行き次第で変わります。） ちなみに実践編の方ですが、私も書籍を購入させて頂きました。 Web Design Trends(ウェブデザイントレンド) Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立
これは便利！ありそうでなかった最新Web、オンラインツール36選
この記事では、「それ、何使ってるの？」と思わず聞きたくなるような、最新のWeb、オンラインツールをまとめてご紹介します。 めずらしいだけでなく、面倒で手間のかかる作業がほんの数クリックで完成の時短アイテムや、今までなかったけどあると便利なツールや素材を中心にセレクト。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. アイコンツール 4. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール Make Way Grid Effect 一枚の画像を選択すると、他の画像が場所をゆずって、道を空けてくれるアニメーションエフェクト。 CSS Shadow Gradients 2色の配色によるグラデーションをつかった影、シャドウグ
Web制作初心者に役立つ良質なツールやコンテンツ達を出し惜しみせず全部紹介
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
WordPressでアドセンスを記事内に表示させる3つの方法 | まめー
アドセンスを記事中に表示させているブログはよく見かけますね。 今回は、Wordpressで記事中の任意の場所にアドセンスを表示させる方法を3種類紹介します。 ※僕のテーマはSTINGER3なので、同テーマを使っているブロガーの方は特にお役に立てるかも。 最も避けたい方法 とにかく記事の中にアドセンスのコードを突っ込まなくてはいけないのですが、毎回、投稿画面でコードをコピー＆ペーストするのは面倒な上、今後の管理も大変です。 やめたくなった時とか。そうならないために簡単かつ効率的に行う方法をまとめました。 それでは、以下の3つ方法の中から自分に合ったもので実現させてみてください。 ※なお、（その2）（その3）のfunctions.phpを編集する場合は、絶対にバックアップをとってから行って下さい。 その1 プラグインで実現する 「Master Post Advert」という便利なプラグインを使
STINGER5カスタマイズまとめ！知りたい全てはここにある！
ついにレスポンシブとなった大人気Wordpressテーマ「STINGER5」 SEOの強さとカスタマイズ性の高さがその人気の理由ですね。 多くの方が使われているのでカスタマイズ記事が多いのもその強み。 今回はStinger5のカスタマイズ記事を部分ごとにまとめてみました。きっとあなたのやりたかったモノも見つかりますよ。 ※Stinger3のまとめはこちらのサイトをご覧ください。 (ここを見ておけば検索不要！Stingerカスタマイズ辞典) STINGER5の構造理解 STINGER5のid,class構造 テーマの構造がわかっているのといないのとでは、カスタマイズの自由度、楽しさが大きく変わってきます。ざっくりとでもclass,id構造は把握しておきましょう。 Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編- ディスプレイサイズによるcss適用範囲の違い
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録 - ガジェニュー
今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「STINGER5」に鞍替えをするためにどんなカスタマイズをしたのかを備忘録として残しておきたいと思います。 今回の目標は上記なような広告配置を完成させることでした。これが初心者の自分にとってはかなり大変でした(^_^;)ということで、勉強も兼ねてまとめてみました。 今回は下記のサイトを特に参考にさせて頂きました。ありがとうございます。 STINGER５でアドセンスの配置を記事下ダブルレクタングルに変更してみました | saketorock's blog ということで、早速ですがやったことを書いていきます。 stinger5の全体の幅の調整上記のサイトを見ていただくとstinger5の全体の構成がよくわかると思いますが。サイドバーが300pxで残りがメインのエリアとなります。今回は記事上部に728*90サイズを表示
アドセンスってどう貼ってる？ 収益を1.5倍にしつつイヤミでない貼り方はこうだ！
アドセンス、どう貼ってますか？ 収益最大化のためにはファーストビューにいれなきゃいけないとか、ダブルレクタングル使えとか、サイドバー上がいいとか、できるだけ大きい広告を使えとか言われていますね。 しかも アドセンスは3カ所までしか貼れないからと忍者AdMaxやらFluctやら他のアドネットワークに手を出していませんか？ 天下のグーグル様ですよ。アドセンス3カ所までしか貼っちゃいけないってことは、3カ所以上貼ったらWebサイトの価値が落ちるよって言ってくれてるようなものじゃないですか。 しかもサイトを広告ゴテゴテにしたからといって忍者AdMaxからじゃアドセンスほどの収益は見込めませんよ。はい。 こうなってませんか？ 僕も一時期広告ゴテゴテのサイトを作ってましたが、今は落ち着きました。冷静になりました。 それでは、僕が使っているStinger5を例にとりながら、イヤミでない、かつ収益化も考え
CSS書くだけでTumblrテーマが作れる「Tumblr Boilerplate」作った - MEMOGRAPHIX
Tumblrテーマ、いちから作ろうとすると大変なので、あらかじめ基本的なHTMLが組まれてあるBoilerplate的なのを作った。 http://sanographix.github.io/tumblr-boilerplate/ これを使うと、CSSを書くだけでTumblrテーマ作れるので、block:Post みたいなテンプレートタグとか覚える必要なくて爆速でテーマ作れる。ZENやApolloをベースにしているので、全投稿タイプに対応している。MITライセンスなのでHTML変えたかったら変えても良いです。 テーマ作りたい人とか、CSSくらいは自分で書きたい人はご利用ください。 Tumblr Boilerplate - A naked boilerplate for tumblr theme development
デザイナーを目指す人必見！デザインのはじめかた〜8つの心構え〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーの野田です。 今回は私がデザイナーとして、またクリエイティブディレクターとしてここまでやってきた自己啓発をふまえ、「デザインのはじめ方」を書かせていただきます。 まず、少しだけ私の経歴をお話しますと、高校を卒業してから独学でデザインを勉強し、会社を転々としてフリーランスになりました。流れ流れてLIGに入社というカタチでクリエイティブディレクターとして働いています。 ここまででお分かりかと思いますが、私はデザインの学校というものにしっかりと通ったことがありません。そのため、学校に通っていた方々からすると、とても泥臭い自己啓発をしていました。 デザイン技術に伸び悩んでいる、または、これからデザインを行いたいという方に参考にしていただけると幸いです。 私がデザイナーをはじめた時に行っていた事 個人個人の考えがあると思いますが、私がデザイナーをはじめた際に行っていたことをいく
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
Webデザイナー 検索・登録／フリーランスWebデザイナーHP集
北海道 (7) 青森 (4) 秋田 (3) 岩手 (1) 山形 (5) 宮城 (4) 福島 (5) 茨城 (1) 群馬 (4) 栃木 (2) 埼玉 (8) 東京 (51) 千葉 (10) 神奈川 (27) 山梨 (3) 長野 (3) 静岡 (6) 新潟 (1) 富山 (3) 石川 (5) 福井 (4) 愛知 (9) 岐阜 (5) 三重 (4) 滋賀 (4) 京都 (12) 大阪 (25) 奈良 (2) 和歌山 (3) 兵庫 (14) 徳島 (3) 香川 (2) 愛媛 (7) 高知 (1) 岡山 (3) 広島 (4) 鳥取 (1) 島根 (1) 山口 (2) 福岡 (21) 長崎 (5) 佐賀 (1) 大分 (2) 熊本 (2) 宮崎 (1) 鹿児島 (3) 沖縄 (5) 海外 (1)
デザイン時に注意したい角丸の使いかた - Design Color
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
5分で分かるレスポンシブWebデザイン
レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応／変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基本的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス スマートフォンサイト デザイン集 AGT thinkthing スマホ制作に役立つ情報 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 少しのコードで実装可能な15のスマートフォンサイト用小技集 200サイトのiPhoneデザインを見て感じたスマートフォンの最適化 Webサイトのスマートフォン対応 7つの基本ルール スマー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゴシック体のフリーフォント15選【商用利用可】
人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ | シェアしたくなる最新のWebサービス・ITニュース情報をチェック！ APPGIGA!!（アプギガ）
ボタン作りの手間を削減！CSSボタンデザインジェネレーターまとめ
