商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 1. Adobe Fontsの手書きフォント（6個） 2. 和文、日本語の手書きナチュラル・フリーフォント（54個） 3. 英語の手書きプレミアムフォント（8個） 4. 英語の手書きナチュラル・フリーフォント（69個） 現在、137個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フ
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
スクロールするとアニメーションしながら要素が表示するスクリプト「ScrollReveal」のDEMO
var ScrollrevealFade = { origin: 'left', distance: '0px',//移動範囲 scale: 1,//拡大表示（１で横スクロールが始まる） rotate: { x: 0, y: 0, z: 0 }, //xは縦回転、yは横回転、zは傾き（風車みたいな感じ） duration: 1200, //アニメーションの速度 delay :200 //要素が表示するまでの待機時間（ディレイ） }; sr.reveal('.scrollreveal-fade', ScrollrevealFade, 100); 上記のような形でオプションは記述していきます。scaleを0.8にすれば表示の際に拡大するように表示されたり、1.2にすれば縮小しながら表示されたりします。 rotateの数値をいじると、縦回転・横回転・傾きをしながら表示されるようになります。また、
ズームアウトしながらフェードで切り替わるZoom Sliderの使い方
Zoom Sliderの使い方とは？ Zoom Sliderの特徴は、ズームアウトしながらフェードで切り替わること。ズームアウトするスピードや次の写真に切り替わるスピード、次の写真に移るタイミングを簡単に操作できます。ズームインやスライドといった機能はないのでご注意を。 それでは説明していきます。 ステップ１： zoomslider.jsを読み込む 配布サイトからzoomslider.jsをダウンロードしましょう。 ダウンロードするとdistというフォルダの中に以下の４つが入っています。 jquery.zoomslider.min.jszoomslider.cssdots.pngplain.png distフォルダごと以下のようにjsフォルダにインポートします。 インポートしたら</body>の直前に以下のコードを挿入してください。フォルダへのパスは自分の環境に合わせて変えてくださいね。
パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
jQueryでページ内スクロールの速度・位置をカスタマイズする
今回は、jQueryを使ってページをスクロールする方法を紹介します。 よく、WEBページを見ていると「TOPへ戻る」のリンクがあり、クリックするとスクロールしてTOPへ戻る事があります。 HTMLだけでもページ内リンクを使うことでページをスクロールすることはできますが、jQueryを使うことでスムーズなスクロールを実現することができます。 animate()を使ったスムーズなスクロール 今回使うのは、アニメーション効果を作成するanimate()です。リンクがクリックされた時に、移動先となる要素の位置を取得し、animate()のscrollTopプロパティを使うことでスムーズなスクロールを実現します。 HTML まずは、HTMLは通常のページ内リンクと同じように、以下のようなリンクを作成します。今回は、ID属性targetを持つ要素の位置までスクロールします。
inview.jsで画面スクロールで特定位置に入ったら要素をアニメーション表示させる方法 - STAND-4U
この方法の場合、一度アニメーション表示した後、スクロールして上に戻った時、２度目はアニメーションさせない事もできますし、２度目以降も何度もアニメーションさせる事も、どちらでも可能だ。 「jQuery.inview.js」の使い方 事前準備として、 jQuery 1.8以上を読み込んだ上で、GitHubから「jQuery.inview.js」をダウンロードしてきて読み込んでおく。 <script src="common/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="common/js/jquery.inview.js"></script> その上で以下の記述で表示させたい「要素」と、画面に入った時に「実行する内容」を記述するだけ。 実行するアニメーション処理の部分は、Javascriptのアニメーシ
Demo|North-Geek
画面に表示されたら要素がかっこよく表示されるサンプル 戻る 縮小・拡大表示 透明→不透明 回転 3D回転 移動 縮小・拡大＆3D回転 透明度＋移動 １．縮小・拡大表示 ２．透明→不透明 ３．回転 ４．3D回転 ５．上移動 ６．ズームイン＆3D回転 ７．フェードイン＋上移動
PhotoshopでWeb用に保存した画像の色が変わる時の対処法（CS6 版）
最近、ワードプレスのテンプレートを作成したんですが、 スタイルシートで指定した背景色とPhotoshopで作った画像の色が合わなくて、 一体どうなっているんだ？ ということがあったので備忘録を兼ねて残しておきます。 参考サイト 画像もphotoshop上では、カラーコードが指定した背景色と同じなんですが、どうやらWeb用に保存したときに色が変わってしまっていたみたいなんですね。 調べてみると、同じ症状が出て解決された方がいたので、下記サイトを参考に設定を行いました。 PhotoshopでWEB用保存すると色が変わるときの解決法 「Webおよびデバイス用に保存」すると色が変わる!? web用に保存すると色味が変わる時の対処法 １、新規作成の場合 Photoshopで新規ドキュメントを作成する際のウィンドウで、詳細というところがあるのでクリックします。 次にカラープロファイルという項目があるの
【5分でわかる】入力フォームの作り方とは？無料おすすめ作成ツール9選とデザインのコツ
入力フォームにはこのように多くの種類があるので、必要な機能も異なります。目的に合わせてそれぞれの目的にあったフォームを導入する必要があります。 入力フォームの作り方 1.業者に外注する 入力フォームの作り方1つ目は、Web制作会社などプロへの依頼です。 デザインから機能まで自社に合わせて一から設計してもらえるため、オリジナルの入力フォームが作れます。 ただし、他の作り方と比べて費用が高額になってしまう点がデメリットです。2万円〜数十万円の費用がかかります。 外注した場合は修正も制作会社に依頼する必要があるため、時間がかかってしまうのもデメリットです。 自社で入力フォームを作成するリソースがない、オリジナル性の高い入力フォームを作成したい場合におすすめの方法です。 2.入力フォーム作成ツールを使う 入力フォームは、入力フォーム作成ツールを使用することで簡単に作成できます。無料で使えるツールも
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
Webデザイナー必見！Web制作を失敗しない為のコンセプトシート
もう１０年以上デザインを行い１００は越える制作をしてきましたが駆け出しの頃はノイローゼになるは、何度もこの業界を辞めよようと思ったか。。そんな苦労を皆様にして欲しくないと思い僕の制作ノウハウをお伝えし更に「コンセプトシート」「ヒアリングシート」をプレゼントします。Webデザイナーをこれから志す人や、未経験だけどWebデザイナーになりたい人にも必見です。 デザインの仕事は本当に大変 WEB制作（ホームページ制作）をしている方は必ず悩む事、それはWEB制作をいかにスムーズにするかという事です。 中でもとびきり面倒な事として上げられるのがクライアントから「デザインを作っても何度もリテイクをくらう」ということです。 更に制作したのは良いが効果が出ないとクレームが来ることです。。。 制作の進め方は個人に依存してしまう。 過去私も同じような経験をしております、この業界色々な事が出来る分制作の方法はその
Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ
TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人
Web Designing
イメージを共有するための創意工夫とは？「それからデザイン」に見る、 理解が深まる、想いが伝わるプレゼン術 中小企業を中心に、「ブランド戦略型」と名付ける独自のスタイルでWeb制作を行う「それからデザイン」。 同社にとって、プレゼンテーションは“提案の場”というより、“コミュニケーションの場”といった方がしっくりとくる。 クライアントとイメージを共有するため、そしてスムーズなコミュニケーションを構築するために欠かせないという同社のプレゼンテーション資料について、代表である佐野彰彦氏の言葉とともに紹介したい。 相互理解を深める「コンセプトワードシート」 「それからデザイン」ならではのプレゼン資料が、企業のキャッチコピーとコンセプトを言葉にして、1枚にまとめた「コンセプトワードシート」。 企画の意図をわかりやすく説明するだけでなく、「それからデザイン」がクライアントをどのように理解しているかを示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
inview.jsでスクロールして表示されたらアニメーションを実行する-サンプル付き｜Gimmick log
http://blog.yukarien.com/tech/wp-responsive/
おすすめの手土産・お土産｜ギフト専門店のシャディ ギフトモール
ReFa－リファ 公式通販サイト | MTG ONLINESHOP
オンライン英会話のケンペネEnglish | 株式会社LS Creation