すべてのカテゴリ

当サービスは、高品質、高コスパのLP（ランディングページ）を制作します。 高品質な有料画像、売れるためのLP構成ガイド付き！ 当サービスの特徴 ・高品質なテンプレートをベースにお客様に合わせたカスタマイズします。 ・LPの構成から文章・画像・カラーを変更可能です。 ・売れるLPに必要な構成のガイド付きで文章作成も安心です。 ・シンプルでわかりやすく見やすい、情報が伝わるデザイン ・ご自身で構成順序の並び替え、ブロックの非表示も可能なため、ABテストも簡単です。 通常では高額になる作り込まれたLPをベースに使用することで、高品質、低価格かつ高コスパを実現しています。 当サービスはこのような方におすすめです ・はじめてLPを制作する方 ・高品質なLPをできるだけ安価で欲しい方 ・派手なデザインよりもシンプルでわかりやすく写真を活かしたデザインで制作したい方 ・HTMLの知識が無くてもご自身で定期的に更新してABテストを行い方 当サービスはこのような方におすすめいたしません ・キャッチコピーや文章作成まですべて丸投げでお任せしたい方 ・低品質でいいからとにかく安く済ませたい方 ・予算は惜しまずレベルの高いデザイン・クオリティで制作した方 LP制作内容 スマートフォン表示対応 画像選定（著作権フリーの写真・イラスト） WordPressの導入、初期設定 お問い合わせフォーム 内部SEO対策、表示速度対策 セキュリティ対策 お知らせやブログの投稿機能可 SNS連携可 簡単なスクロールアニメーション Googleマップ、You Tube動画埋め込み Googleアナリティクス・Google

select2というjQueryプラグインを使うことで、セレクトボックスに機能をつけることが出来ます。もちろんCSSなどでカスタマイズが可能です。カスタマイズ時には、記述したHTMLのコードに、自動生成されるコードを隣接セレクタとして指定することでカスタマイズすることが出来ます。コード例です。/*html*/ <select class="p-selectbox1">   <option value="こぶた">こぶた</option>   <option value="たぬき">たぬき</option>   <option value="きつね">きつね</option>   <option value="ねこ">ねこ</option> </select> /*js*/ /*select2基本的な使い方*/ $(document).ready(function(){     $('.p-selectbox1').select2(); }); /*css*/ /*カスタマイズ例　隣接セレクタを指定*/ .p-selectbox1 + .select2 {   overflow-y: scroll;   height:100px; }以上ですサービスのご購入はこちらから。

パララックスを使って動画のように背景画像を動かすことが出来ます。コードとしては概ね以下のとおりです。画像部分のみ載せています。ご参考になればと思います。/*コード例*/ /*HTML*/ <div id="parallax" class="p-frame"></div> /*CSS*/ .p-frame{   height:10rem;   width:29.8rem;   background-image:url(画像のパス);   background-repeat:no-repeat; }/*JS*/ $(window).scroll(function(){   var height = $(this).scrollTop(); 　　　　/*高さを調節*/  var yLine = height - 290; 　　　　/*parseInt( yLine / 2 )の整数部分(今回なら2)を調節することで、スクロール時の動きを調節。値を小さくすると、大きく動く*/  $('#parallax').css('background-position', 'left top ' +parseInt( yLine / 2 ) +'px');   });ご依頼はこちらまで。

jQueryにおける$(this)を使う事で、下記のように、同一のクラスに対してjQueryで何か操作をするとき、イベントがあった特定の要素にのみ動きをつけたり、値を取得したりできます。言葉だと説明しづらいので、CodePenやテキストエディタで以下のコードを入力してみてください。動画も載せておきます。/*html*/<p>ボタンを押すと色が変わります。</p> <p>thisを使わないと・・・ <div class="box-container1">   <button class="box1"></button>   <button class="box1"></button>   <button class="box1"></button> </div> <p>ボタンを押すと色が変わります。</p> <p>thisを使うと・・・ <div class="box-container1">   <button class="box2"></button>   <button class="box2"></button>   <button class="box2"></button> </div>/*css*/.box1{   width:4rem;   height:1rem;   margin-right:1re

Webサイトによってサイトデザインは様々ですが、header部分はある程度似通っている部分があると思います。そのため、案件を請け負った際に時間短縮をするためにheader部分においては、ある程度のテンプレートを作ってしまおうと思います。前回1パターン作っているので、今回は第3段です。PC時のレイアウトは以下のとおりです。サブメニューについては、クリックで表示させるようにしています。レスポンシブでハンバーガーメニューを表示させています。ハンバーガーメニューをクリックすると、横からサイドバーが表示されるようになっています。✕ボタンを押すと戻っていきます。こちらもよくあるパターンのレイアウトなので、時間短縮に繋げられると思います。ご依頼はこちらまでお願いいたします。

初めまして。大阪でWEBデザイナーをしておりますShirokumaDesignと申します。ディレクション、Webデザイン〜コーディングまで対応可能です。 Webや紙の制作物でお困り事があれば、お気軽にご依頼くださいませ♪ ありがたいことに、LP（ランディングページ）制作の依頼を多くいただいております。基本的にはWEBサイトのコーディングをメインで行っているのですが、案件のご依頼が多数あるため、LPのコーディング費用を明瞭化させていただきます。以下、依頼基本的な費用です。お客様にとってベストな提案ができればと思っております。WEBサイト構築がメインのため、合間にLP制作を進めさせていただくかと存じます。納期やスケジュール・費用感などの関係上、お受けすることが難しい可能性もございます。その点はご理解・ご了承くださいませ。ココナラでは「LP専門」のプロがいらっしゃいます。納期やコストなど見合わない場合もあるかと思います。その際は「LP専門」のプロにご依頼いただくのも選択の一つとして、ご一考いただければと存じます。お客様にとって、きっと満足にいくものを仕上げていただけるかと思います。■基本依頼をご検討いただいているお客様の、参考になれば幸いでございます。引き続き、ShirokumaDesignをよろしくお願いいたします。

ポートフォリオとして、下記サービスに新しいサイトを2つ追加しました。一つはデンタルクリニック。サイトを作り始めた時期が歯医者に通い始めた時期と重なったので、歯医者を題材にしました。色は明るめのブルーグリーン。デンタル系の製品や洗剤等によく使われる色で、昔に読んだ色彩心理学の本によると「誰も嫌わない色」なんだそうです。デザイン面ではJQueryでナビゲーションの上にコンテンツを移動したり、一部にSVGファイルの配置を行なっています。本文のフォントは一般的なゴシックよりも親しみやすいM PLUS 1pを選びました。テンプレートは私が一番好きなRomeを使用しています。もう一つはマーケティング企業。以前に公開していた物を手直ししました。こちらもJQueryを使用し、一部要素に対して動きを与えています。また、Flexboxを使用してスマホ表示時でもカラムを2列の状態のままにしている箇所があります。色はメインビジュアルに合わせた紺色をメインカラーとし、ボタンに紺色の補色であるオレンジを使用しています。テンプレートはCairoを使用。初期の状態ではメインビジュアルの下辺が斜めになっていて、都会的なイメージのサイトにはぴったりのテンプレートです。2つのサイトのアドレスは冒頭に貼った私のサービスのサービス内容文に記載しています。ポートフォリオサイトの中で気になった部分などがありましたら、DMなどでお気軽にご質問下さいよろしくお願い致します。

Facebook投稿支援アプリにReact/Vueは必要か (2)？WebアプリやWebサービスを開発するのにフレームワークがどこまで必要なのかをシンプルなアプリを例にして考える企画を実施しています。 前回の投稿は、シンプルにHTMLとJavascriptだけで実装してみました。アプリがシンプルなのでHTMLとJavascriptだけでも簡単に実装できました。この記事ではHTMLとJavascriptに加えてjQueryを利用してみました。少し前には利用が多かったjQueryjQueryは、フレームワークというよりは、Javascriptのライブラリという感じのものです。どう呼ぶかはこの記事ではあまり重要ではありません。何が便利かというと、JavascriptでHTMLで記述した部分の操作をシンプルに記述できるようになる点です。例えば、Javascriptの機能でHTMLのDOM(Document Object Model)を取得する場合には、const sample = document.getElementById("sample") と書いているのと同じ操作を以下のようなシンプルな記述に置き換えることができます。const sample = $('#sample') Javascriptのコーディングをシンプルにすることができるので、少し前はよく利用されていました。現在でも、DOM操作に特化したライブラリなどを作る際にはよく利用されています。最近は、Webアプリなどでは主流はReactやVue、或いはAngurarと言ったフレームワークになっています。しかし、Webページ

～使いこなしたDWなどツール及びコーディング手法はそのままで！～ 記事を書くまでの経緯 Webデザイナーなのに、VueJSを勉強しようと思ったら、 「NodeJSも勉強しないといけない？分からない…」 「JavaScriptなのに、拡張子は.vue？？分からない…」「ローカルPCでコーディングしているのに、サーバも必要らしい？？？難しそう…」「せっかく綺麗なページを制作していますが、VueJSを導入するとレイアウトが崩れそうなら、意味がなくなるじゃないかと懸念しています」「Reactを見たら、JavaScriptでHtmlコードがぐちゃぐちゃになり、解読ができない＞＜」...もう心が折れてしまうよ、VueJSを勉強する気がなくなったｗ（泣き）長年にわたってWebデザインそしてコーディングに馴染んでいる方々は上記の感情はございませんか。 大丈夫、こんな時、私は身に付けたノウハウ（独自の手法が多い）を教えてあげます！ 私、サーバサイドエンジニアです。 フロントエンドの開発にも携わっておりますが、当初はVueJSを勉強するときも色々悩んでいました。 でも、壁を超えて、さらに独自の手法で気軽にコーディングできるようになり、実際のお仕事でもWebデザイナーとうまく連携できるように至っております。 （もろちん英語までもたーくさんの資料を探してきて経験を積んできたわけ） ついに、VueJSが理解できるまでの基本部分の資料（jQueryと見比べる視点から）を作成しました！ お気軽に読みいただけるレベルだと思いますので、ぜひWebデザイナーの皆さんにお役に立ちましたら幸いです。 保有いた

JavaScriptは、いわゆるプログラム言語です。どういう環境で使われるかと言いますと、有名どころでは、ホームページで使われています。ホームページに動きをつけたり、機能を追加したりといった具合に使われています。JavaScriptは、C言語系の言語と言われています。そのため多くの文法はC言語と同じです。特徴的なのは、ホームページで使う場合に、ホームページを表示するWebブラウザの情報を取得したり、操作したりといったことができるということと、DOMと呼ばれる、ホームページを作っているHTMLや、CSSを操作することができるということです。C言語を使う場合には、一般的には、コンパイラと呼ばれるものを用意しなければなりませんが、JavaScriptは、ブラウザ(Chrome,Edge,Firefox,Safariなど）を用意すれば、JavaScriptで作られたプログラムの動作確認をすることができます。さて、jQueryはなにかと言いますと、JavaScriptで作られたプログラムの集合体です。つまり、ライブラリと呼ばれるものです。JavaScriptで作られているだけあって、JavaScriptとjQueryは、ちゃんぽんにすることができます。ただし、jQuery特有のオブジェクトは、注意して使わなければなりません。JavaScript・jQueryは、ホームページだけでなく、iPhone、Androidなどのスマホアプリの開発にも使われています。これは、iPhoneのアプリの言語を例に上げますと、Swingなどがありますが、Swingには、ホームページを表示するコンポーネントが

今日もまた出品サービスを改善してみました、値段をよりわかりやすくして納得いただけるようにしてみました。

最近はエンド営業やyeやwaで始まるサービスについて調べて投稿が滞ってましたが久々に投稿してみます。今回はcssの変数についてcssでも使用できて色など面倒なコードを省略して各ことができます/* CSS変数の定義 */ :root {     --p-color: #008bff;} /* CSS変数の使用 */ .element {     color: var(--p-color); }

cdnひとつで要素が文字や絵がふわっと浮き出る方法がありますaosというcdnでちょっとcdnいれてクラスをいれれば楽々実装なので重用しました。

今web制作のハンバーガーメニューの実装していますが下手に横幅を調整すると真ん中がずれるずれるうまいこと調整してくれるサイトはないものかと探すこのごろ

Webサイトのデザインはそれぞれ違っていても、header部分などはある程度共通の仕様になっていることが多いです。そこで、header部分について作業時1からコーディングをしなくてもすむように、パーツを作ってしまうことにしました。左側にロゴがあって右側がナビゲーションメニューになるようなパターンです。レスポンシブ時はナビゲーション部分がハンバーガーメニューに変わります。お仕事のご依頼はこちらから最後までお読みくださりありがとうございました。

最近はユーザーのスクロールに連動してアニメーションするサイトが普通になってきた。少し前はパララックスが新しかった気がしますが、色々変化するものです。で、サクイも乗り遅れてはいけないとアレコレ工夫しています。連動と言っても画面インで発火、スクロールで発火と大きく2つに別れている気がします。以前はググってゴリゴリなスクリプトを難儀して組んでたけど、最近はinview.jsとIntersection Observerでほぼほぼカバーできる気がしてます。実際、動きが入ると作ってる方も楽しいのでOKなんですが、やりすぎ注意ですね（笑）

「これ」を「ここ」に移動しました、というのが視覚的にわかりやすいというのは重要ですね。web上で確認できるのがなかなか便利。