Profile

Cover photo
竹内慶
Works at ドリームネットデザイン株式会社
Lives in 神戸市東灘区御影中町1丁目9-3
15 followers|50,840 views
AboutPostsPhotosVideos+1'sReviews

Stream

竹内慶

Shared publicly  - 
 
【javascript】レスポンシブなタブメニューをサクッと実装できる

「Responsive Full Width Tabs」
PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。
特にタブメニューとなると、スマホサイズになると見づらく、タッチしにくくなってしまうことがよくあります。
そこで今回は、スマホなどの小さな画面で表示したときもバッチリ使いやすい、コピペで使えるレスポンシブタブメニューをご紹介します。
===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1663
これまでに、まとめた記事はこちらから
http://www.dream-net.org/blog/
==========================
元のサイトはこちら
Responsive Full Width Tabs - codrops
【画像】01.jpg
PC画面の場合の見え方
【画像】02.jpg
スマホ等小さい画面での見え方
【画像】03.jpg
画面サイズが大きい時はアイコンとテキストのセットで見せ、小さい画面ではアイコンのみにすることで見やすくなっています。
デモはこちら
http://tympanus.net/Blueprints/FullWidthTabs/
アイコンは、IcoMoon(https://icomoon.io/)のアイコンフォントを使っています。
【使い方】
IcoMoon App(https://icomoon.io/app/#/select)からお好みのアイコンを選択し、ページの下にある「Font」ボタンをクリック。
【画像】04.jpg
下のダウンロードボタンをクリックすると、フォントに加え、サンプルのCSSとHTMLも一式ダウンロードすることができます。
【画像】05.jpg
HTML側では、アイコンを表示させるタブ部分のアンカーリンクに、アイコンフォント用のクラスを記述します。
食べ物アイコンを表示させる場合:

[HTML]
<div id="tabs" class="tabs">
<nav>
<ul>
<li><a href="‪#‎section‬-1" class="iconのクラス"><span>タブ1</span></a></li>
<li><a href="#section-2" class="iconのクラス"><span>タブ2</span></a></li>
<li><a href="#section-3" class="iconのクラス"><span>タブ3</span></a></li>
<li><a href="#section-4" class="iconのクラス"><span>タブ4</span></a></li>
<li><a href="#section-5" class="iconのクラス"><span>タブ5</span></a></li>
</ul>
</nav>
<div class="content">
<section id="section-1">section-1の内容</section>
<section id="section-2">section-2の内容</section>
<section id="section-3">section-3の内容</section>
<section id="section-4">section-4の内容</section>
<section id="section-5">section-5の内容</section>
</div><!-- /content -->
</div><!-- /tabs -->
<script src="js/cbpFWTabs.js"></script>
<script>
new CBPFWTabs( document.getElementById( 'tabs' ) );
</script>
元の解説サイトの「Download」からファイル一式をダウンロードできます。
タブメニューをレスポンシブ化したいときはぜひ、使ってみてください。
===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1663
これまでに、まとめた記事はこちらから
http://www.dream-net.org/blog/
==========================
 ·  Translate
タグを貼り付けるだけでレスポンシブデザイン対応のタブメニューの導入が簡単に行えます。「Responsive Full Width Tabs」の紹介
1
Add a comment...

竹内慶

Shared publicly  - 
 
ペナルティーを受けたときに便利です。
 ·  Translate
1
Add a comment...

竹内慶

Shared publicly  - 
 
手持ちの写真を何でもLEGO®風にするオンラインツール「Brick-a-pic」

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1258
===========================

プロフィール写真や風景写真など、画像ならなんでもLEGO®風ブロックにしてしまう面白ツールをご紹介します。
Brick-a-pic

http://me.brickapic.com/

1.CHOOSE AN IMGEから画像を選択。

するとLEGO®化された画像が下に現れます。

2.サムネイル右側のボタンで、拡大縮小、回転ができます。

するとLEGO®化された画像が下に現れます。

3.プレビュー画像の左上のアイコンから、角度を変更したり、リセットしたりできます。

4.サイズを選択し、Finished!をクリックするとダウンロードページへ。

FacebookやLINEなど、SNSサービスのプロフィール画像に使うと可愛いですね。
◆画像が本物のLEGO®になる?

Brickpick社はさらに、この画像を元に、本物のLEGO®ブロックを組み立てられるキットを送付してくれるサービスを開始しようとしています。送られたブロックを説明書に従って組み立てれば、写真がそのままLEGO®に。
実現すれば、ギフトやインテリアにも良さそうですね。

https://www.kickstarter.com/projects/77057469/brick-a-pic-turn-an-image-into-lego-bricks

今後の動きが楽しみです。

=============================
オリジナルロゴ制作についてもお気軽にご相談ください。
ロゴ制作案内ページへ
http://www.dream-net.org/parts/logo.html

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1258
===========================
 ·  Translate
プロフィール写真や風景写真など、画像ならなんでもLEGO®風ブロックにしてしまう面白ツールをご紹介します。
1
Add a comment...

竹内慶

Shared publicly  - 
 
簡単に素敵なオリジナルロゴを作れるウェブツール「Squarespace Logo」

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1142
===========================

デザインができなくても、簡単にかっこいいロゴを作れる「Squarespace Logo」。
URL:http://www.squarespace.com/logo/

ロゴテキストを打ち込んで、アイコンを一つ選ぶだけ。HPは作りたいけれど、デザインの知識はないしお金もかけられない・・・という方にはピッタリです。
さっそく作り方をみてみましょう。


まずはサイトにアクセス。
「LOGO NAME」部分に会社名やブランド名を入力します。


試しに本屋さんのロゴを作ってみます。
「sample BOOK」と入れて、右矢印をクリックすると・・・


画面中央には、もうロゴらしきものが!
左側にはアイコンが用意されており、その数は7,000以上。
検索をかければ、合致するアイコンが表示されます。
「book」で検索してみると


本のアイコンがずらり。
好きなものをチョイスします。

画面下には、名刺やWeb、Tシャツに反映させたイメージが用意されています。
数十秒で作成したとは思えないクオリティです。

最後に、画面左下の「SAVE LOGO」をクリック。
【画像】05.jpg
「DOWNLOAD LOW RES」・・・360×400サイズのPNG画像を無料でダウンロード
「DOWNLOAD HIGH RES」・・・5000×5000以上の高解像度画像をダウンロード

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1142
===========================
 ·  Translate
デザインができなくても、簡単にかっこいいロゴを作れる「Squarespace Logo」。クオリティーもそこそこで一瞬でおしゃれなロゴが作れます!
1
Add a comment...

竹内慶 changed his profile photo.

Shared publicly  - 
1
Add a comment...

竹内慶

Shared publicly  - 
 
SEO対策勘違いしてないですか?
あなたのサイトがユーザーにとって必要な情報かどうかが大事です。
ただリンクを集めるだけではペナルティーを受けてしまう可能性もあります。
この件にについて解説ページを制作しました。
興味ありましたらご覧ください。
http://www.dream-net.org/seo-mistake.html
 ·  Translate
1
Add a comment...

竹内慶

Shared publicly  - 
 
カメラ初心者必見!人物写真を今までよりもずっと美しく、おしゃれに撮るコツ

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1453

これまでに、まとめた記事はこちらから
http://www.dream-net.org/blog/
==========================


人物写真を撮影する際、少し雰囲気の良い写真を撮りたいと思っていても、いつも平凡で、記念写真のようになってしまう、ということはありませんか?
光や構図を少し意識するだけで、今までよりもずっとキレイに、オシャレに撮るコツがあります。
今回は、そのポイントを5つご紹介します。


1、逆光、もしくは半逆光くらいで
斜め後ろくらいから光があたるのがちょうど良いです。順光だとまぶしくて良い表情が撮れなかったり、顔に影が強く出たりしてしまいます。陽射しのあまり強 くない時間帯や曇りの日がベスト。陽射しの強い日であっても、直接陽射しが当たらない建物の陰などで、逆光気味の光を作って撮りましょう。やわらかい印象 の写真が撮れます。顔が暗くなってしまう場合は、露出補正で数値を少しプラス側に上げながら調整しましょう。


2、背景をぼかし、人物を引き立てる
背景をぼかすと人物が際立ち、はっきりとした印象的な写真になります。ぼけを大きくするために、Aモード(絞り優先モード)に設定し、F値を2〜2.8まで小さくしましょう。絞りが開くので、下の写真のように大きく背景がぼけ、主題である人物に視線が集まります。


3、レンズは望遠側で
人物の撮影には、レンズの焦点距離は50mm以上が適しています。広角レンズで撮影すると、歪みがでることもあります。レンズを望遠側に合わせ、なるべく 被写体に近づいて撮影しましょう。記念写真では背景と人物を一緒に映すことが多いですが、ポートレートの場合は、なるべく背景から余計なものを除き、人物 を引き立てるように撮ります。また、近づいて撮ることで背景のぼけも大きくなり、印象がアップします。


4、「三分割構図」を使う
何も考えずに写真を撮ってしまうと、被写体が写真の真ん中に来るのではないでしょうか。ですがそれでは平凡で、面白みがありません。三分割構図は、画面を 縦と横にそれぞれ3分割し、その交点に被写体を配置する構図。こうすることで雰囲気が良くなり、バランスもとれます。また、4つある交点のうち、どこに被 写体を配置すればいいのかということですが、これは撮影するシチュエーションや被写体によって変わります。基本的には、人物の視線側が狭いとどこか不自然 になってしまうので、視線側にスペースを広く取るような配置にしましょう。


5、レフ板を使う
バストアップの写真を撮る場合は、顔の下にレフ板をあてるだけで、肌のトーンが一段明るくなります。レフ板がない場合はコピー用紙でも可。100均やホームセンターに売っている安価なプラスティク板でも十分ですので、1枚買って、撮影の際に持ち歩くといいですね。


◆ちょっと上級者向け。測光モードでプロ級に
写真の明るさに関わる露出。オートモードはカメラが自動的コントロールしてくれるので、普段は意識せずとも適切な明るさで撮影することができます。ですが、明暗の差が激しい逆光や、晴天下で撮影すると、人物が暗くなってしまうことがあります。
そんな時は、マニュアルモードに切り替え、測光モードを変更してみましょう。
測光モードには3種類あります。

・マルチパターン測光
何も設定していなければ、普段はこのモードになっています。ほとんどの撮影状況で適正な露出を得られますが、逆光の場合には適正な露出が得られにくくなります。
・中央部重点測光
ファインダーの中心部分に重点を置き、露出を計測します。被写体が中央に位置する時は的確な露出が得られます。逆に、被写体が端にある場合は適正露出が得られにくくなります。
・スポット測光
ピントの合った部分を測光します。マルチパターン測光で人物が暗くなってしまう、という場合に、ピント位置に合わせて測光できるので、被写体を明るく撮ることができます。

これら3つの測光モードを頭にいれておくと、いろんな撮影状況下でも適正な明るさで撮影することができます。


測光モードは少し上級者向けの設定ですが、その他の5つはどれも、少し気をつけるだけでできる撮影方法です。ここを意識するかしないかで写真の出来映えは大きく変わってきますので、機会がある方はぜひ試してみてはいかがでしょうか。

▼プロのカメラマンによる写真撮影
http://www.dream-net.org/photo/

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1453

これまでに、まとめた記事はこちらから
http://www.dream-net.org/blog/
==========================
 ·  Translate
写真撮影のコツ!光や構図を少し意識するだけで、今までよりもずっとキレイに、オシャレに撮るコツがあります。今回は、そのポイントを5つご紹介します。
1
Add a comment...

竹内慶

Shared publicly  - 
 
大阪・北新地のクリニック様のホームページを制作しました。
映像制作からホームページ制作、システム開発までを対応しています。急ぎでの公開をご要望でしたので、主要なページを優先順位を上げて制作を行い、残りのページについては、公開しながら随時アップするという手法でホームページの制作を行いました。
▼クリニック杏. (アンチエイジング、免疫療法)
http://clinic-an.com/
これまでの実績はコチラからご覧いただけます。
▼ホームページ制作実績
http://www.dream-net.org/result/
 ·  Translate
1
Add a comment...

竹内慶

Shared publicly  - 
 
【SEO】プレスリリース×Google発信前にチェックしたいポイント3つ

===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1146
===========================

プレスリリースとは、企業などから、テレビ・ラジオ・新聞・雑誌・ニュースサイト等、各報道メディア向けに発表される声明のことで、新製品のPRなどに効果的なプロモーション手法です。
ただ、Web上に掲載するプレスリリースには、注意すべき点があります。
それは、Googleのプレスリリースに対する見解です。一歩間違えればペナルティの対象にもなりかねません。

◆Googleの見解
Googleの見解は、ウェブマスターツールのリンクプログラム
https://support.google.com/webmasters/answer/66356?hl=ja)に記載されています。
以下、抜粋。

さらに、サイトの所有者が編集時にページに配置したリンクではないリンクや保証していないリンク(不自然なリンクと呼ばれます)を作成することは、 Google のガイドラインへの違反と見なされることがあります。Google のガイドラインへの違反にあたる不自然なリンクの例としてよくあるケースを次に紹介します:
(中略)
他のサイトに配布される記事やプレスリリース内の最適化されたアンカーテキストリンク。次に例を示します。
市場には多くの婚約指輪が流通しています。結婚式を開くなら、最高の指輪を選ぶべきです。また、花やウェディング ドレスを購入する必要もあります。


2013年以前、一部のWebサイトマスターの間で「プレスリリースは被リンク効果があってSEOに使える」との考えが広まり、プレスリリースを装ってテキストに過剰なリンクを貼り、SEO効果を狙う手法が増加しました。
上記はその行為に対するGoogleの対応策です。
現在は、プレスリリースのアンカーテキストリンクはSEO効果がなく、むしろペナルティの対象となるおそれがあります。

それでは、ペナルティを受けずにプレスリリースを発信するにはどうしたらいいのでしょうか。
プレスリリース発信を安全に、効果的に行うための3つのポイントをご紹介します。

1、アンカーテキストリンクにはno-followを付ける
被リンク効果をゼロにする「no-follow」をリンクテキストに付与することで問題は解決します。
現在、プレスリリースを自動配信してくれる主要サービスのほとんどは、リンクに自動的に「no-follow」が付与される仕組みになっています。
下記のようなサービスを積極的に利用し、安全にプレスリリースを配信しましょう。

ValuePress!http://www.value-press.com/
PR Times http://www.value-press.com/
@Press http://www.atpress.ne.jp/ News2u http://www.news2u.co.jp/


2、プロモーションとして利用する
SEO目的でのプレスリリースは効果がないことは前述しましたが、新商品・新サービスを幅広く告知する、という本来の目的でのプレスリリースはもちろん、効果的です。
ここで言う目的とは、以下のようなことを指します。

・新聞、ニュースサイトなど各種メディアへの掲載
・SNSでの拡散など、口コミ

つまり、相手は記者や読者といった人間。
必要なのは、検索エンジン向けにリンクを貼ることではなく、人間に向けて商品・サービスの魅力を訴える文章を書くことです。
それを読んだ人が、自発的に商品・サービスのページにリンクを貼ってくれることは、ペナルティの対象にはなりません。


3、広告文ではなく、第三者の視点から
Googleにとってプレスリリースは広告かもしれませんが、本来プレスリリース文は広報としての役目を持つものです。
「優れた」「美しい」などの主観的な形容詞を使わず、第三者の目線から事実のみを簡潔に書くことが大切。メディアの記者が読み、「ニュース性があるから紹介しよう」と思ってもらえるような書き方を心がけましょう。


ペナルティを受けるかもしれない、と恐れて利用しないのではなく、本来の目的をふまえれば効果的なプロモーションを行うことができます。
ニュース性のある新商品・新サービスは、プレスリリースでどんどん発信されてほしいと思います。


===========================
オフィシャルブログで解説画像を使用し分かりやすく解説しています。
DREAM-NET DESIGN ブログページへ
http://www.dream-net.org/blog/?p=1146
===========================
 ·  Translate
1
Add a comment...

竹内慶 changed his profile photo.

Shared publicly  - 
1
Add a comment...

竹内慶

Shared publicly  - 
 
デザインする際にあると便利なフリーフォントをまとめました。
興味があったらご覧ください。
【デザイン】使いやすさで抜群!商用フリーの日本語フォント

http://www.dream-net.org/blog/?p=881
 ·  Translate
1
Add a comment...

竹内慶

Shared publicly  - 
 
パソコンにフォントをインストールしなくても、好みのフォントをサイト上で表示させることができるWebフォント。GoogleFontについてまとめましたので興味のある方はご覧ください。
http://www.dream-net.org/blog/?p=840
 ·  Translate
1
Add a comment...
Story
Tagline
ホームページ制作会社ドリームネットデザイン株式会社の代表をしています。
Introduction
ホームページ制作相談室|Dream-net Design株式会社
http://www.dream-net.org

WEBデザイナーが代表の制作会社です。
デザイナーが直接お伺いし、ホームページ制作につて詳しくご相談にお答えさせて頂きます。
お客様の想いをそのままデザイナーがお伺いしホームページに反映致します。

KTrick合同会社
http://www.ktrick.com/
XPages、ロータスノーツ・ドミノのモバイル・WEBアプリの開発


また、神戸を中心にビジネスマッチングサイトの運営も行っています。
http://www.business-index.jp/
Bragging rights
DREAM-NET DESIGN・KTrickを中心にグループ会社・仲間内の会社 みんな仲良し
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
神戸市東灘区御影中町1丁目9-3
Contact Information
Work
Phone
+81 78-763-2999
Fax
+81 78-761-0898
Address
神戸市東灘区御影中町1丁目9-3カネヨシビル2階
Work
Occupation
ドリームネットデザイン株式会社代表取締役ウェブプロデューサー・ウェブディレクター・ウェブデザイナー
Skills
Webデザイナー
Employment
  • ドリームネットデザイン株式会社
    代表取締役, present
    ホームページ制作/システム開発/印刷物(名刺・チラシ・パンフレット等)/イラスト制作/ロゴデザイン/その他デザインに関する業務
  • KTrick合同会社
    代表/業務執行社員
    システム開発/Notes/Domino ソリューション
Basic Information
Gender
Male
竹内慶's +1's are the things they like, agree with, or want to recommend.
Google ウェブマスター向け公式ブログ: Webmaster Tools API を更新しました
googlewebmastercentral-ja.blogspot.com

Google ウェブマスター向け公式ブログへようこそ!このブログではウェブマスターツールの最新情報や Google のクロール・インデックス・ランキングについて、初心者の方からホームページ運営、サイト構築を仕事にしている方まで、ウェブマスターの皆様に役立つ情報をお届けします。

jQueryでホームページに「吹き出し」を付ける方法 | 神戸のWEBデザイナー竹内慶のオフィシャルブログ
www.dream-net.org

【jQuery】細部にわたって遊び心と機能性を与える、吹き出し風ツールチップ8選. 補足説明やリンク先の情報などを省スペースで表示するのに役立つ吹き出し。 デザイン性や機能性に優れた吹き出しもどんどん出てきています。その一部をご紹介します。

ウェブデザイナーだけの会社です!ホームページ制作相談室
www.dream-net.org

デザイナーが直接対応するので想いが伝わる!ホームページ制作費用もデザイナーの作業時間だけで計算するから低価格で対応可能です!

旅客船協会様ホームページ制作実績 | ホームページ制作実績|ホームページ作成相談室
www.dream-net.org

ホームページ作成を神戸でお考えならホームページ制作相談室|SEO実績多数. ホームページ制作相談室 · Home · Company · Webデザイナー求人 · ホームページ制作相談室へのお問合せ · ホームページ制作 ホームページ制作実績 SEO対策 ホームページメンテナンス

Diff Checker
www.diffchecker.com

Diff Checker is a free online diff tool that compares text differences between two blocks of text.

全国ブラジリアンワックスサロン検索サイトGOODBRAZILIAN
goodbrazilian.sakura.ne.jp

全国ブラジリアンワックスサロン検索サイトGOODBRAZILIAN

1 review
Map
Map
Map