勝手に始めたブログテーマの四季シリーズ4つめ「冬」です！こちらも2月末くらいの期間限定で公開します！またもスマホ版は作ってないのでPCで見てくださいねー！ 参考になる！幻想的な冬のデザインいろいろ 冬デザインを制作する時に参考になるWebサイトやUIデザインなどを集めてみました！ スノービューティー 資生堂スノービューティーのランディングページ。昨年は濃い配色や巧みなグラデーションづかいが魅力でしたが、今年は淡い色彩でフラットなデザインとなっています。ロゴに使われているエレガントな筆記体は今年も変わらず、ラインがうっとりするほど美しいです。 Snow Beauty｜資生堂 ちなみに2015年の資生堂スノービューティーのサイトデザインはLP アーカイブさんのサイトから見ることが出来ます！こちらも素敵！ ランディングページ LP Snow Beauty｜スキンケア・美容商品｜自社サイト 冬を楽

春はあけぼの、夏は夜…とくれば、「秋は夕暮れ」ですよね〜！というわけで、今回は夕空と紅葉がテーマのデザインです。11月いっぱいまで公開する予定です！今回もPC版しか作っていないので、スマホの方はPC版表示にして確認してみてくださいね〜！ 参考になる！美しい秋のデザインいろいろ 秋デザインを制作する時に参考になるWebサイトやポスター、グラフィックデザインなどを集めてみました！ 極彩の秋 紅葉の東部カナダ ファーストビューの写真が美しい「エア・カナダ」のプロモーションサイト。やっぱり秋デザインのキーワードといえば「紅葉」ですよね。赤・黄色・緑・茶色など様々な色を楽しめる紅葉は秋デザインには必須ともいえるモチーフなのかもしれません。それにしてもカナダでもこんなに美しい紅葉が見られるんですね！行ってみたい。 エア・カナダ【日本】カナダ・オンタリオ州、ケベック州とその近郊情報サイト「極彩の秋 紅葉

ブックマークレットとは？ ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん！」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。なので、ちょっとしたことをするならばブックマークレットを使ったほうがPCのメモリの節約になるのでオススメです！ サイト運用・分析に使えるブックマークレット あらゆるSNSでの反響がすぐに分かる！「ソーシャルてんこ盛り」 まずは私が１番お世話になっているブックマークレットである「ソーシャルてんこ盛り」。これ1つで気になるページのSNSでの反響をいっぺんに知ることができます！また、このブックマークレッ

テーマは藤と桜！ 春ということで、藤と桜をテーマにデザインしました！スマホ版は作っていないので、PC版で見てくださいねー！ お気に入りはactywayのあくちー(@actywav)さんが作成した桜のプラグイン！このテーマでは桜の花びらの色を変えて藤の花びらとして使用しています。藤の花が上から降ってくるイメージ。 サイトに桜を降らせることができるあくちーさんのスクリプトはこちらで配布しています！あくちーさん素敵なスクリプトをありがとうございます〜！ サムネイルサイズ変更にあたりPHPでデザインを切り替えて表示 テーマ変更にあたり、サムネイルのサイズを大きくしました。そうすると、サムネイルまわりのデザインも変わってしまうんですよね…。画像が以前より小さくなる分にはサムネイルを切り出して再生成すれば済む話なんですが、大きくするとなるとそうはいきません。途中からPHPでデザインを切り替える必要が発

シンボリックリンクとは まず、シンボリックリンクとは何でしょう。 あるファイルやディレクトリに別の名前を与え、ユーザやアプリケーションがその名前をファイル本体と同様に扱えるようにする仕組み。 引用：シンボリックリンクとは 【 symbolic link 】 – 意味/解説/説明/定義 ： IT用語辞典 ざっくり言うとショートカットのようなものなのですが、最も決定的な違いはシンボリックリンクは「実体」として扱えるという点ですかね。使いどころとしては例えば以下のような場合が挙げられます。 Dropbox上のデータをXAMPPなどのローカルサーバーで確認したい ローカルのファイルをDropboxで他の人に共有したい 先述したように、Dropboxにある元ファイルをXAMPP上で確認したい場合、シンボリックリンクを作成すればDropboxでファイル更新があってもXAMPP上のファイルも連動して更新

もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型：赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型：緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型：青い光を主に感じる錐体が無いため、青色付近の識

ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }

「Ajaxでページ遷移する」ってどういうこと？ そもそも「Ajax」とは？ Ajaxとは以下のように定義づけられています。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 引用：Ajaxとは – 意味/解説/説明/定義 ： IT用語辞典 つまりはブラウザをリロードせずに、サーバとのデータのやりとりを可能にすることなのですね！「オートページャー」にはこのAjaxの技術が使われています。 Ajaxでページ遷移する「オートページャー」の仕組み オートページャーとは、分割されている「次のページ」を今みているページ内にAjaxで継ぎ足して読み込んでくれるものです。以下の図のような形となります。 普通のページ遷移であれば、1ページ目、2ペー

2018年4月25日　追記 画像まとめのリンクが切れていたので、代わりに竜やドラゴン、タツノオトシゴのフリー素材を追加してみました。 「辰年」の年賀状に使われている主なモチーフ 年賀状デザインをしていて、ひとえに「辰年」といっても様々なモチーフがあるのだな、と感じました。代表的なモチーフは下記の３つだと思います。 一番右のモチーフはタツノオトシゴですね。「竜の落とし子」って、いい名前ですよね・・・！この子については後ほど紹介するとして・・・ 下のふたつのモチーフの違い、わかりますか？ 「え、どっちも竜でしょ？」と思った方がいましたら、実は違うんです！ 次でその違いについて詳しく触れていきたいと思います。 先ほどの二つの画像。ふたつとも「辰年」に多く使われるモチーフです。 両者の違い・・・それは・・・ 蛇のような下の画像。 こちらが一般的に「竜」と呼ばれるものです。 そして翼があり、後ろ足の

2.ローディングアイコン 読み込んでいる間に表示させるローディングアイコンを用意しましょう！ 私はこちらのサイトでローディングアイコンを作成しました！細かい設定ができるジェネレーターです！ 3.「次のページへのリンク」を取得する関数 「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。 例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。 以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得

1.スマートフォンサイトのデザインを研究 以前に「私が初めてブログのデザインをした時の流れ」という記事を書きましたが、その時「ブログらしいデザイン」を事前に調べたように、今回も「スマートフォンサイトらしいデザイン」というものを研究しました。 PCとは勝手が違うので、スマートフォンでは何px以上の文字サイズなら見やすいのか？どのくらいの大きさのボタンなら押しやすいのか？ロゴやメニューはどこにおくのか？など、最初は何もかもわからなかったです。 その時、参考にさせていただいた記事は以下のとおりです。 ありがとうございます！ 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 | 07design.blog スマートフォンサイトをデザインする上で知っておくべき10のTIPS – to-R スマートフォンの画面デザインで気をつけるべき4つのポイント ｜ SONICMOOV

「カラーハンティング展　色からはじめるデザイン」とは 「カラーハンティング展　色からはじめるデザイン」とは以前「デザインあ展」が開催されたことでも有名な21_21 DESIGN SIGHTで開催されている企画展です。 「カラーハンティング」とは、この企画展ディレクターの藤原 大さんが、編み出したデザイン手法です。自然や都市に存在する現実の色を、自ら水彩絵具を調合してその場で紙片に写し取っていくとうもので、まさに「カラーハンティング」という名前にピッタリですね。 iPhoneアプリ「Adobe Kuler」を使ってカラーハンティング（もどき）！ 私も企画展の色から「カラーハンティング（もどき）」をしてみたいと思います！ というわけで、最近お気に入りのiPhoneアプリ「Adobe Kuler」を使用！ Adobe Color CC ? カラーテーマを取得 カテゴリ: ユーティリティ, 仕事効

Adobe Kulerとは 「Adobe Kuler」とは元々はオンラインでカラーテーマを手軽に作れるサイトです。とても使い勝手がよく、見本も豊富なので私はよくこちらを利用させてもらってます！このブログのカラーテーマも「Adobe Kuler」を利用しました！ Design Colorのカラーテーマ「Vitamin seas」 そして、今回ご紹介するのはiPhoneアプリの「Adobe Kuler」です！こちらのアプリはちょっと前まで850円で提供されていたらしいですよ！今は無料とのことなので、とても嬉しいですね！ Adobe Kuler まずはダウンロード itunesからダウンロードしてくださいね！ Adobe Color CC ? カラーテーマを取得 カテゴリ: ユーティリティ, 仕事効率化 撮影画面からリアルタイムに色を抽出 iPhoneアプリの「Adobe Kuler」のすごいと

もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基本的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか！しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。（とはいえ、タグやはてブのリンクまでは大きくできなかったのですが）一部を除いては基本的にはリンク要素は「44px以上」

CSS Nite ＠Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など 2018 1/03 レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバイスにワンソースで対応する技術が「レスポンシブWebデザイン」です。具体的には、閲覧しているデバイスの画面サイズに応じてサイトのレイアウトを切り替えてくれるというもの。 例えば以下のサイトでは画面幅が変わるごとにレイアウトとおじさんの顔が変化するという面白い作りになっています。 Hello Fisher 他にPCサイトを各デバイスに対応する方法としてはPHPなどで表示を切り替える方法がありますが、そうなると各デバイス用のデザインやソース、画像を新たに用意する必要が生じてきます。 もちろん、何も対応しなくても各デバイスからPC

もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！ ジョジョの奇妙な冒険 オールスターバトル バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「

ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介！ 2015 9/25 もくじ ブログの目的など デザイン ラーメンぽい配色 角丸を使って女性らしく 「ゆるっと」感を出すために手書き風に 画像はなるべく使用せず、テキストベースに WordPress サイドバーやフッターは全部ウィジェット 管理画面のカスタマイズ 広告を管理するためのプラグイン「AdSense Manager」 はじめに ラーメン評論家「本谷亜紀」さんとは 本谷亜紀さんは「ラーメン女子大生」として、テレビ朝日「お願い！ランキング」など数多くのメディアに出演し、近年は「女性ラーメン評論家」として活躍されている方です。とても可愛らしくて素敵な女性です。 「本谷亜紀のゆるっとラーメンブログ」とは 私がブログ作成をお手伝いすることになったのは、「男子ハック」の純平（@JUNP_N）さんか

もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は？ 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう！と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ

今回の試みたブログの見直し 今回行った大きなブログ見直しは以下の通りとなっています。 他の記事への「おすすめ」の仕方を強化 関連記事にサムネイルを追加 facebookの「Recommendation Bar」を追加 サイドバーの充実化 「人気記事」の表示 「はてなブックマークの人気記事」の表示 Facebookページ作成 他の記事への「おすすめ」の仕方を強化 とにもかくにも、願いはただひとつ。時間があれば、他の記事もぜひ読んでもらいたい！…ということで、他の記事への「おすすめ」の仕方を自分なりに強化してみました！ 関連記事にサムネイルを追加 今までは記事下に関連記事をテキストのみのリスト表示で出していました。ですが、サムネイルがないとどんな記事かパッと見てイメージがつきづらいし、「クリックしたくはならない」のかなあ…ということで、こちらにサムネイルを追加することに。 さらに、今までのコー

はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプログラム情報などが満載のブログです！ 今回は、そんなあくちーさんの良記事のひとつ「まるでサイダーみたい！炭酸飲料みたいに気泡が上がってくスクリプトでシュワワのアワワ！ : actyway」に沿ってお伝えします！ カスタマイズ方法 泡の動き(Javascript) 泡スクリプトのベースは先日Web系ブロガーさんの間でブームを巻き起こした「雪スクリプト」をベースにしているそうなので、そちらを参考に変更しました。 クリスマスに使いたい！雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway そして泡のソースコードはこちら。自分好みにカスタマイズするなら、主に下記のハイライト