ある正円形の要素にマウスオーバーをすると、角丸四角になるような効果をつけたくて、jQueryの.hover()使用してborder-radiusが変化するアニメーションを設定した所、一旦正方形に戻ったうえで角丸にアニメーションしていくという動きをして調査したので記事に。（正しい動きと言えば正しいのでしょうが…） ▽やりたい動き ▽現実 まずマウスオーバーして実際の動きをご確認ください。 デモを別窓で開く 対策しても、ページ表示後の初回のアニメーションのみ未対策の時と同じ動きを […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、スクロールに合わせてついてくるメニューを作ります。 デモ 実際に動かしてみるとこんな感じになります。 フレーム内を縦にスクロールすると、ナビゲーションが途中から上部に固定になります。 デモを別ページで開く ファイル一式ダウンロード ナビゲーション要素のid、切り替えるスクロール位置の高さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：ま […]
おはようございます。皆様梅雨のしっとりした季節、如何お過ごしでしょうか。 私は雨女のせいもあり、外出する時には何故か雨がぱらついてしまうので、私生活までしっとりと過ごしております… カラッとした季節が待ち遠しいですね。 横浜市の舞岡公園に行ってきました。ぼくのなつやすみみたいな風景、のどかでオススメスポットです！ — さて、本日の本題ですが、今日はYahoo!JAPANのバナー広告を集めてみました。 老若男女、たくさんの人が閲覧する検索エンジンのトップページに掲載 […]
<!–なぜか無いと動かない–> Webサイトを閲覧している時、右クリックして「ページのソースを表示」とすると、そのサイトのHTMLソースが見ることができます。 全く分からない方の為にものすごくざっくり説明すると、「ここに画像を表示する」「ここにハイパーリンクをはる」などと、Webサイトに必要な機能が全部書かれているんです。 その中で、コメントアウトというメモのような記述があります。 <!– ナビゲーション –& […]
ついに関東も梅雨入りしたようですね。 毎日これから雨かと思うと憂鬱ですが、そんな気持ちがちょっと晴れるといいな、と思います。 本日もTwitterまんがを書きました。休憩の合間の息抜きにどうぞ。 LEGO 本日のツイート 本日書かせて頂いたツイートはこちら。 とってもかわいい。 バックナンバー あわせてこちらもどうぞ。 Part35 「社蓄川柳」 Part34 「流行りの」 Part33 「新米パパ」 Part32 「指きり」 Part31 「スーパーカップ」
皆様ランディングページって言葉ご存知でしょうか。例えば、楽天などで蟹何かを販売する時にずーっと説明が縦に長くてゴテゴテに装飾されたページ見たことがあるかと思います。あれがランディングページです。 キャッチコピー、コンセプト、安全性、効果、お客様の声etc… 普通のWebサイトとは異なり、新商品やおトクなプランなどの商材をより効果的にアピールするためのページですので、普段の作り方とは全く異なったテイストで制作されます。不思議なもので、延々と商品の効果をうたわれると、 […]
猫の写真を眺めるのが好きなんですが、昨日ずっと眺めていたら降ってわいたようにキャラクターのイメージを思いつきまして。イメージを捨てちゃうのももったいないのでデータに起こしてみました。 ふっとい麻呂眉が特徴です。
タスクの合間になんとなくサラッと手が動いて落書きしてしまう。絵を描く習慣のある方には多いんじゃないでしょうか。 私も時々落書きしてしまいます。後から見返してみると何を考えていたのか全く分からないのですが、こういうのを見るのはとても楽しくて好きです。 今日はそれらが溜まってきたので載せてみましょう。 ▲「ツヤツヤ」ってそんなに大きく書かなくても。きっとバナーのデザインを考えていたんだと思います ▲メールのお返事を待っていました ▲空腹過ぎて時空が歪んでいます ▲北海道を表したく […]
最近、パワーポイントで資料を作る際に綺麗にまとめるコツを調べていたのですが、多くのチュートリアルでアイコンやイラストを使って視覚的に訴えかけることが勧められていました。しかし絵心もないし、イラスト素材探し出すのも一苦労…とお悩み方も多いのではないでしょうか。 ならば私が描きましょう！と発起してイラスト素材を作ってみました。 なんとこのイラスト素材、全てパワーポイントの図形を使って作られています。拡大縮小をかけても解像度が足りなくてモジャモジャになったりしません。色も自分好みに […]
少し気が速いかなと思いましたが、GWのおでかけにぴったりなスポットを集めてみました。 長い連休はやっぱり楽しみですね。私は既子供のように張り切っています。オンオフ切り換えて、しっかりやっていきたいですね！ 【原宿】あいぱく アイスクリーム博覧会 2015 場所：ラフォーレ原宿 期間：2015/5/2 ～ 2015/5/6 11:00～20:00 URL: http://www.i-89.jp/ 【幕張】プラレール博 in TOKYO ～みんなのまちへプラレールが大集合！！～ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は画面サイドにくっついてくる、折りたためるサイドメニューを作りました。 デモ 実際に動かしてみるとこんな感じになります。 デモを別ページで開く ファイル一式ダウンロード 各要素のid、メニューの横幅、ボタンの中身、アニメーションの速さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを […]
仕事柄、WEBに関することをプライベートでも聞かれることが多いです。 一番多いのが「WEBサイトってどうやって作るの！？」というものなのですが、説明する際にHTMLソースを見せて「ここに画像を表示して、ここに文章を書いて、って表示の指示を延々と書いていくの」と伝えると、大抵の方が「そっか…」と少し悲しそうな顔をします。 英数記号の羅列を見ると拒否反応を示してしまう方が多く、そこで話が終わってしまいます。 実際にHTMLタグを学ぼうとして他のサイトを見てみるも、何だか難しそうだ […]
御存知でしょうか。今2016年度の年賀状デザインコンペ真っ盛りの時期だと言うこと。 とても気の早い話に思えますが毎年この時期です。早い所は皆が年始の休みが明けた頃に締切で、もう応募が終了していたりします。 aiデータを渡すので、デザイナーとしては割に合わない作業になりがちなんですが、ちょっとお小遣い稼ぎしたい時なんかにはぜひどうぞ。大体入賞すればそのまま商品化されます。 ◆2016年版 東急ハンズオリジナル年賀状デザインコンペ 締切：2015年05月18日 (月) 賞：大賞（ […]
こちら、日本の都道府県の標章です。先日まとめとして拝見したものなのですが、それぞれの意味を調べてみたらなかなか良い者になったので、記事にしてみました。 北海道 北海道開拓使が使用していた旗のデザインを元に、現代的にしたもの。先人の開拓者精神と雄々しく伸びる北海道の未来を表している。 —– 青森県 青森の地形を図案化したもの。カラーは深緑が指定してあり、余白の白地と合わせて意味が設定されている。白地は無限に広がる宇宙世界を表し、緑は躍進発展してやまない希 […]
以前記事にした「【デザインまとめ】綺麗なデザインの管理画面 40種類 」、時間が経ってリンク先が消えていたりしますね。 また綺麗なデザインの管理画面も追加したいと思います。 サムネイルだけで見ると、全部似たようなものに見えてきますが、デモサイトを見てみると細かな部分でデザイナーさんの個性が出ていて面白いです。 ご参考になれば幸いです。 左に紺か黒のナビがあるやつ ◆Material Admin デモサイト ◆Edumix 黄緑がきれい デモサイト ◆Make デモサイト ◆C […]
おはようございます。今日の渋谷は晴れ。気温も12度らしくて随分春めいてまいりました。 私はというもの、最近「Sonomy」というアプリにハマっています。イベントの情報や美味しいご飯やさんの情報等が延々と流れてくるのですが、それらを「興味がある or ない」に分けることによってだんだんと自分好みの情報ばかり流れるようになるという画期的なアプリです。 今や私のSonomyはスイーツとごはんの情報ばかり流れてくるようになりました。位置情報とも連動していてピンポイントで情報を提供して […]
おはようございます。本日の渋谷は雨です。寒いですね。 風邪が流行っているようなので、温かい物を食べて、気をつけて過ごしましょうね。 今日は日本語のロゴを集めてみました。 英字のロゴはたくさんあるんですが、日本語のロゴっていざ探すとなかなかしっくりくるものが無くて苦戦したりします。 参考になれば幸いです。
デザイナーとしてお仕事をしていると、デザインを教えて欲しいと言われることがあります。 私は専門学校でデザインを学んだのですが、一番初めに基礎として練習したのが「パスの使い方」でした。 デザインの作業をするにあたって、背景の柄や、絵を描いたり、ロゴマークを作ったり、非常に大切です。使えないと仕事になりません。 （私に話を聞きに来る学生さん達は、photoshopを使って絵を描くことはできるけど、パスを使えないという子が多かったりします。） デザインに関して話し始めると24hあっ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は時間で画像が切り替わるスライドショーを作りました。動作は一番シンプルで、クリックの処理は入っていません。TOPページでイメージ画だけ切替表示したい時に便利ですね。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼サンプルでは、3枚のスライドがフェードのアニメーションで切り替わります。 別ウィンドウで開く Step1：まず下準備 こちらはい […]
おはようございます。今年もあと数日ですが、皆様いかがお過ごしでしょうか。 長い長い休みをとって、既に退屈に過ごしている方もいらっしゃるんでしょうか。 そんな退屈に少しお付き合いするために、今日も漫画を書きました。 ほっこりとした気持ちになれば幸いです。 流行りの 今回書かせて頂いたツイート 今日はこちらのツイートを書かせて頂きました。 2014年大流行した「アナ雪」。こんな所にまで旋風を吹かせているんですね。とってもかわいい。 バックナンバー あわせてこちらもどうぞ。 Par […]
今日は、サイトを訪問したデバイスによってタグを追加するjsを書こうと思います。 タブレットやスマートフォンなど、CSSを追加したい時になんか便利ですね。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼div（id=”apArea“）にデバイスに応じてテキストが挿入されます。 Step1：まず下準備 こちらはいつもと同じです。まず必要なファイルを読み込みます。 headタグの中に、jQueryと、自 […]
以前、このブログで公募のまとめを記事にしました。 その中で埼玉県秩父市が開催していた「秩父市イメージキャラクターデザイン」の公募。 実は私もプライベートの時間を使って参加していたのですが、悲しきかな、落選が決定したのでこちらに掲載することに。せっかくですしね。 秩父市の公募 リンク: 「秩父市イメージキャラクターのデザインを募集します！」 主旨として、市のイメージアップのため、りゅうごんに続く「「秩父市」をモチーフにしたイメージキャラクターのデザイン」を制作するというものでし […]
おはようございます。最近めっきり冬らしくなってきましたね。 皆様いかがお過ごしでしょうか。 私はというもの、年の瀬に向けて少々忙しくなってきています。 風邪引かないようにがんばって、年末まで駆け抜けていきましょう！ さて、今日もほっこりと温かい気持ちになる癒しをお届けしたいと思います。 ちょっぴり息抜きにどうぞ。 新米パパ 本日書かせて頂いたツイート 今日はこちらのツイートを書かせて頂きました。 とっても幸せそうな家族ツイートが最近お気に入りです。 バックナンバー あわせてこ […]
今日はjQueryで、tableのチェック項目などでよくある「全てチェックする」のチェックボックスを作りたいと思います。要素の指定さえ合わせれば簡単に作れます。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ 実際に動かしてみるとこんな感じになります。 別ウィンドウで開く Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascrip […]
おはようございます。最近随分と秋めいてきましたね。過ごしやすい気温なのでとても快適です。 そんな中、スーパーやコンビニを見ているとハロウィンパッケージの商品がちらほらと出てきました。お月見が終わると行事ごとが一旦落ち着くので、ハロウィンは10月末にも関わらず随分早いです。 私もせっかくなので便乗しようと思い、キャラクターを作りました。 ゆるいキャラクターを作るのがとても楽しいですね。 先日秩父市キャラクター公募にも募集してみました。結果は10月だそうで、今とても楽しみにしてい […]
運営会社:株式会社8bit
制作サービス
運営サービス
