こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ 目次1 Enllax.js2 ScrollMagic3 Horizontal Timeline4 Midnight.js Enllax.js パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグイン […]
日頃、キャッチコピーやデザインの説明を考える際に時間がかかりがちなので、時短のためにワード集を用意しました。この中からイメージにあった単語を拾ってきてアレンジ。デザイン用語ではなく、分かりやすいイメージを幅広く集めています。（色の違う文字は好きな単語を当てはめてください） 「どんな」「何」「どうした」の3種類でざっくりと分類しています。 ワード集のエクセル版はこちらから 目次1 どんな2 何3 どうした どんな 印象的な ダイナミックに 力強い さりげなく 整然とした 統一感 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 目次1 ナビをhoverしたときに、中央から線を出す1.1 14行目1.2 16行目1.3 18～25行目1.4 26～28行目1.5 29～31行目1.6 33行目～2 背景を固定する2.1 3行目2.2 4行目 ナビをhoverしたと […]
今回も自作背景を作っていきましょう。今日のテーマは「星空」。 目次0.1 手順1 01.星を散らす1.1 02.空の写真を調整・合成する 手順 01.星を散らす 02.空の写真を調整・合成する 実はとても手順が少なく、カンタンに作成できます。 01.星を散らす まずは画面に星を散らしていきます。まずは下準備。白一色のカンバスを用意します。 色の設定をします。 描画色を白、背景色を黒にします。 「フィルター」＞「フィルターギャラリー」＞「ちりめんじわ」を選択し、下記のように適用 […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 目次1 テーブルを均等配置にしたい2 画像を丸く切り抜きたい テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい！という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに […]
ここにこういう素材が欲しい…けれどちょうどよい素材が無い。そんな時は自分で素材を作ってしまいましょう。 今日はphotoshopで空を描きたいと思います。素材は沢山作り方のチュートリアルがありますが、今回は私なりの方法をご紹介します。 サイトに使いたい写真の空を思い浮かべて… 慣れれば短時間で作れますし、どんどん応用が利くと思います。 目次0.1 手順1 01.一番下のレイヤにグラデーションオーバーレイをかける2 02.一番上のレイヤーに白色で大まかに雲のベースを描く3 03 […]
その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]
前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 目次1 単純にオブジェクトを複数作ると…2 たくさんのオブジェクトを生成する3 複数の […]
後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 目次1 CrateJSとは？2 CreateJSの基本のカタチ2.1 HTML2.2 Javascript部分3 円オブジェクトを生成する4 トゥイーンアニメーションで動かしてみる CrateJSとは？ CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理 […]
こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 目次1 vis.js2 D3.js3 cola.js4 CHARTIST.JS5 Chart.js6 Flotr2 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 […]
————————– 前回の記事 → 「【SEO対策・schema.org】itemscope、itemtype、itempropの基本」 基本についてはこちらの記事をご一読ください。 ————————– 今回は「自分のサイトに合うitemtype、itemprop […]
こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 目次1 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット2 max-width(height)をリセットする safariのようなwebkit系のモバイル用ブラウザのフォーム要素 […]
—————————– 続編の記事を公開しました→「【SEO対策】itemtype・itempropの調べ方【schema.org】」 —————————– HTML5より、新しいプロパティが追加されました。（実質HTML4でも使えます） i […]
今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。
こんにちは、工藤です。 今回はフリーでアイコンを提供してくださっているサイトをご紹介します。 目次1 icooon-mono2 Icon rainbow3 Material icons – Material Design4 iconmonstr5 Metrize Icons6 FLAT ICON DESIGN icooon-mono シンプルで使い勝手のいいアイコンだけではなく、ちょっと変わり種のものまで幅広く扱っているのが魅力的です。 なんと6000種類もあるよ […]
React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 目次1 React.jsが来るらしい2 jsなのでまずはライブラリを読み込む3 文字を出力する React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならない […]
例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]
こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 目次1 covervid2 particles.js3 StickyStack4 SHARDS5 rainyday.js6 multiScroll.js covervid 背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js 幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様 […]
こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 目次1 グラデーション1.1 Ultimate CSS Gradient Generator1.2 Blend1.3 shade1.4 CSS Gradient Generator1.5 Gradient Generator2 ボタン2.1 Grad32.2 CSS3 Button Generator2.3 Css Gradient Butto […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポ […]
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
こんにちは、工藤です。 今回はWebデザインの参考になる、ギャラリーサイトをまとめました。 目次1 日本語サイト1.1 I/O 30001.2 81-web1.3 MUUUUU.ORG1.4 ARTNOC.COM1.5 S5-Style1.6 Japan Web Design Gallery1.7 Web Design Clip1.8 WEB DESIGN GALLERY for WEB DESIGNERS1.9 responsive Web Design JP2 海外サイト […]
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 目次1 ヘアスタイルを修正2 服や小物の色を調整する3 肌や前髪をきれいに ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了 […]
こんにちは、工藤です。 今回はローディングアイコを作成してくれるWebサービスをまとめました。 Webサービスだとリアルタイムで色やスピードなどをチェックできるのが嬉しいですね。 目次1 画像で作成1.1 Loader Generator1.2 Preloaders1.3 Loadinfo1.4 Ajaxload2 CSSで作成2.1 SpinKit2.2 Single Element CSS Spinners2.3 CSS Load.net3 SVG/CSS/GIF で作成 […]
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 目次1 全写真共通1.1 写真の輪郭をくっきりさせる2 建物編2.1 主役の建物を垂直にする2.2 建物を切り抜いて背景の天気をよくする 全写真共通 写真の輪 […]
運営会社:株式会社8bit
制作サービス
運営サービス
