Profile

Cover photo
ハヤシユタカ
Works at (有)ムーニーワークス
Attended デジタルハリウッド
Lives in 東京
37 followers|62,384 views
AboutPostsPhotosVideos

Stream

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】4K JAPAN.netとBLANCSNAPで今年もCP+ 2015 御苗場Vol.16横浜に出展します。
http://www.html5-memo.com/other/onaeba2015/

明後日からパシフィコ横浜で開催されるCP+の御苗場に出展します。

CP+に来る人は是非会いに来てね。

毎日いる予定です。
初日は1Fでじっくりいろんなカメラ見てます。

事前登録で入場料が無料になります。
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】SNSのボタンをまとめて配置する【jQuery連載08】 
Wordpressには「WP Social Bookmarking Light」という便利なプラグインもありますが、ブログではこちらを使ってみました。設置の際のオプションをまとめてみました。
http://www.html5-memo.com/other/jquery08/

サンプルはこちらです。
・ソーシャルボタンをまとめて配置する
http://www.html5-memo.com/sample/jq-books/17
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】一定のスクロールをしたらヘッダー部分が固定にするサンプルの紹介です。VogueのサイトのTOPページと同じような動きとなります。
http://www.html5-memo.com/jquery-tips/jquery07/

サンプルはこちら
●特定の位置でヘッダーエリアを固定させる
http://www.html5-memo.com/sample/jq-books/01
 ·  Translate
ページの上部を特定の位置までスクロールさせた際にヘッダー部分を固定するサンプルを作成します。ファーストビューをPRスペースとしてより目立たせたいときに有効です。
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】エフェクトの豊富なタブパネルを実装する(フェード切り替えなど)【jQuery連載05】 http://www.html5-memo.com/jquery-tips/jquery05/
ベーシックなタブの実装ですが、切替時のフェードやボタンサイズについてなどもまとめています。

今回作成してあるサンプルはこちらです。

●タブパネルの幅をテキストのサイズによってと一定に固定させるサンプル
http://www.html5-memo.com/sample/jq-books/03

●クリックやマウスオーバーでの切り替えやフェードアニメーションのサンプル
http://www.html5-memo.com/sample/jq-books/03/index_fade.html
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】ページトップへ戻る+スムーズスクロールとボタンの出現方法いろいろ【jQuery連載04】 
http://www.html5-memo.com/jquery-tips/jquery04/

MdN Design Interactiveで連載を開始した書籍「jQueryデザインのメソッド」の解説の4回目はページの先頭へ戻るのスムーズスクロールです。

ベーシックなものですが、ボタンの出現方法をCSS3のアニメーションやjQueryなどのバリエーションを作っております。

【サンプル】

●ページ下部にある通常配置のサンプルを見る
http://www.html5-memo.com/sample/jq-books/02/pagetop1.html

●スクロールするとフェードでボタンが出現のサンプルを見る
http://www.html5-memo.com/sample/jq-books/02/pagetop2.html

●スクロールすると下からアニメーションでボタンが出現のサンプルを見る
http://www.html5-memo.com/sample/jq-books/02/pagetop3.html
 ·  Translate
縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できるが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングに...
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】ブラウザの背景全体に画像を表示する(ランダム配置とアニメーション)【jQuery連載03】

http://www.html5-memo.com/jquery-tips/jquery03/

過去2回は動画を背景でしたが、簡単に写真も背景にすることができます。書籍の方では一枚貼るパターンと複数枚をフェードアニメーションで切り替えるサンプルも作っています。

MdN Design Interactiveで連載を開始した書籍「jQueryデザインのメソッド」の解説の3回目はページの背景に写真を全面に配置するサンプルです。

過去2回は動画を背景でしたが、簡単に写真も背景にすることができます。書籍の方では一枚貼るパターンと複数枚をフェードアニメーションで切り替えるサンプルも作っています。

【サンプル】
●背景一枚のサンプル
http://www.html5-memo.com/sample/jq-books/10/

●背景画像をランダムにし一定時間でアニメーションさせるサンプル
http://www.html5-memo.com/sample/jq-books/10/index_random.html

サンプルでは簡単なページレイアウトもしているので、ただ背景に写真だけを入れているサンプルではないのでサイトのイメージが掴んでいただけると思います。
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】PCとスマートフォンで画像を切り替える【jQuery連載09】 

今回はレスポンシブレイアウトなどの際に使用する画像をデバイスによって別の画像にするサンプルです。

ブログのように更新が多いサイトでは毎回それぞれ作るのは大変ですが、ランディングページや特設サイトなどをPCで全画面的に大きい画像を使った際などは結構容量があるのでスマホでの閲覧をより軽くしたいなどの際に変えたりしています。


■今回作成したサンプル
http://www.html5-memo.com/sample/jq-books/18
 ·  Translate
jQuery DESIGN METHOD. PCとスマホで表示する画像を最適化させる. サイズの小さい画像と大きい画像を用意した例. 画像サイズは変えず、画質が高い画像と低い画像をを用意した例. Copyright© jQuery Design Method All Rights Reserved.
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
お正月になんだこのペプシ風を意識したCMは?って思ったら面白かったAUの「あたらしい英雄はじまるっ」のCMをまとめました。あわせてペプシもまとめたよ。

新年一発目のブログがこれになりましたがおめでとうございます。

http://webdesignmatome.com/design-matome/au
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】iPhoneやiPadをリモコン代わりにしてPC(Mac)のKeynoteをリモート操作する方法【2014年版】
http://www.html5-memo.com/webtips/keynote-remote/
iphoneなどでのリモートについての記事をまとめました。だいぶ前に書いていたので仕様変わってないといいな。
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ公開】地味ですがツールチックについてまとめてあります。
ユーザビリティを向上するツールチップを作る【jQuery連載06】 
http://www.html5-memo.com/jquery-tips/jquery06/


サンプルはこちらです。
・【サンプル1】title属性または、data-tips属性にtipsを設定する
http://www.html5-memo.com/sample/jq-books/04/

・【サンプル2】title属性にtipsを設定する
http://www.html5-memo.com/sample/jq-books/04/index_title_attr.html

こちらは書籍に載っているもう一つのサンプルです。
・【サンプル3】画像のクイックプレビューを設定する(簡易的な画像拡大機能)
http://www.html5-memo.com/sample/jq-books/04/popup_image.html
 ·  Translate
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】息をのむほど美しい!アフリカの大自然を駆け巡る動物たちをドローンで撮影した映像がスゴイ
http://webdesignmatome.com/design-matome/drone-movie
ドローンでアフリカの動物たちを空撮してますがものすごいよい動画なので是非大きい画面で。
 ·  Translate
カメラを搭載した小型ヘリコプター(わかりやすくここではドローン)を使って、セネガルで動物たちを撮影した映像が素晴らしかったので紹介します。いろいろな動物達の大行進を真上...
1
Add a comment...

ハヤシユタカ

Shared publicly  - 
 
【ブログ更新】iPhone6がでたので今までのiPhoneやiPadのプロモーションムービーいろいろまとめました。【18本+おまけ】
iPhoneやiPadで撮影されたかっこいい動画がたくさんみれます。
http://webdesignmatome.com/design-matome/iphone-movie
 ·  Translate
1
Add a comment...
Story
Introduction
2001年、有限会社ムーニーワークス(http://moonyworks.com/)を設立。WEB制作の他、記事執筆、セミナー講演、企業研修などを行う。

また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。

2012年からはデジハリオンラインスクールにてHTML5をはじめWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「Wordpress」を学べる講座を担当。

================
▼著書・共著
================
■現場でかならず使われている jQueryデザインのメソッド (2014/4/25)

■HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)

■現場で役立つCSS3デザインパーツライブラリ 
エムディエヌコーポレーション (2013/5/17)

■WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作
エムディエヌコーポレーション (2012/9/20)

■WebデザイナーのためのHTML5入門 
秀和システム (2012/08)

■すべての人に知っておいてほしい HTML5 & CSS3 の基本原則
エムディエヌコーポレーション (2012/10/20)

■ポケット詳解 jQuery Mobile辞典
秀和システム (2012/05)

■すべての人に知っておいてほしい スタイルシートデザインの基本原則
エムディエヌコーポレーション (2012/5/25)

Education
  • デジタルハリウッド
    1998 - 1998
  • 大東文化大学
Basic Information
Gender
Male
Work
Occupation
WEB制作会社,大学院講師,専門学校講師
Employment
  • (有)ムーニーワークス
    2001 - present
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
東京