今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
保存数500超えのPocketから、何度も読みたい良記事を紹介していく - LITERALLY
Pocketには本当に気に入った記事・心を動かされた記事が保存されていて、たまに見返すとかなり面白い。今回は保存してきた記事の整理がてら、何度も読みたい記事を厳選して紹介してみようと思う。 まなび系の記事 もらえる経験値を最大化する「正しい努力」のまとめ 努力することについて精神論だけでなく、段階を踏んで論理的に説明している記事。 今すぐ動画で「プログラミングの基礎」を独学できるWebサービス10選はコレだ！ ぼくはプログラミングを学び出したときはドットインストールを使っていたが、他にも色んなプログラミング学習サービスがあるので、自分のレベル・性格に合ったものをうまく使い分けると良い。 UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ どのスライド資料もクオリティが高く、短時間で効率よくUIデザイン・Webデザインの基礎を学ぶことができる。 人を惹きつけ人を動かす文章
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
見ないと絶対損する！プレゼン資料の印象がグッと上がる良質記事10選 | SIROKグロースハックブログ
誰もがかっこいいプレゼン資料をつくりたいと考えていますが、とても難しいことです。今回はプレゼン資料の印象を簡単によくする方法について書かれた記事をまとめました！ 伝わるデザイン｜研究発表のユニバーサルデザイン どうすれば伝えるデザインにできるかについてとても分かりやすく説明されています ビジネスデザイナーZIBA濱口秀司さん のシンプルな図解とフレームワーク プレゼンにも活かせるシンプルで伝わる図解について分かりやすく書かれています。 パワポでの提案書作りに役立つデザイン基礎知識まとめ 時間をかけずに優れたプレゼンを作れる方法が載っています。ビジネスマンにおすすめです プレゼン資料の印象がグッと上がるフォントの法則 フォントの使い方一つでプレゼンの見た目が大きく変わります。 [Webデザイン] 文字組みについて本気出して考えてみた 文字組みの仕方でプレゼンの印象は大きく変わります レイア
スタイルシートで実装するパララックススクロール | コリス
パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 実装方法を簡単に紹介します。 HTML デモのHTMLをシンプルにするとこんな感じになります。 各スライドはdivで配置し、それぞれclassにslideを、idで個別の名称を付与します。 <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>パラグラフ パラグラフ</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト <link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script> 実装 <div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a clas
これで完璧！Webサービスの情報設計をカンタンにする設計用テンプレート完全版
はいこんにちは。最近なぜか風邪が治らないナカムラです。何食ったら健康になれるんでしょうか。誰か教えてください。 さて、サイトを作って！とザックリ投げっぱなされた依頼について、何を掲載するべきで何をどう設計するべきなのか。悩みますよねぇ・・・。 今回は日本ディレクション協会の人気講座「0からのWebディレクション講座：設計編」で、DCHSの高瀬さんが非常に分かりやすい見解と考えまとめ用のテンプレを公開してくれましたので紹介してみます。 以前からこのサイトでもその重要性についてブツブツ言っている感情設計についての考えとも重なる部分多めでしたので、両方読んでいただけると理解が深まるかもしれません。 感動設計テンプレート＆講演資料 ユーザーが感動するウェブサイトを実現するために必要な情報設計とは？ 高瀬さんいわく全てのWebサイト、サービスは「ユーザーを感動させるため」に存在しているし、そうあるべ
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選 Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事・小技テクニックを集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webooost.com/article/show/7
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ