サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
夏の料理
designcolor-web.com
【原因】公式サイトで生成したSNSシェアボタンのコードをそのままループ内にベタ貼りしていた 例えば、Twitterの公式SNSボタンの設置コードって、公式サイトでコードを生成すると以下のような形式になっていますよね。 <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.
また、以前に書いた「Any.do」の記事はこちらです。併せてどうぞ! おすすめタスク管理ツール「Any.do」を紹介!リマインド機能やスマホとの連携が便利 | Design Color 以前に書いた「Any.do」の記事 ブラウザの開きすぎにご用心!「The Marvellous Suspender」 追記 以前は「The Great Suspender」を紹介していましたが、マルウェアが含まれているとして、Chrome ウェブストアから拡張機能が削除されてしまったため、代替の拡張機能である「The Marvellous Suspender」を紹介しています。 作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか?このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。 停止までになる時間を「5分」「15分」「30
もくじ Chromeプラグインでタスク管理 iPhone/Androidアプリでタスク管理 Macアプリでタスク管理 ブラウザ上でタスク管理 Chromeプラグインでタスク管理 頼まれごとをされたらその場でサッと入力! 最も私の生活で活躍しているのがこのChromeプラグインの「Any.do」。アイコンをクリックすれば、タスクが時系列/プロジェクト順に並びます!タスクの入力や終了もとってもカンタン。 私は会社で期限のある頼まれごとをされたら、すぐにその場で「タスク内容」と「期限」を入力することにしています。そうすれば、仮に「頼まれたこと自体を忘れた」ということがあったとしても後で思い出せますからね! また、リマインド機能もバッチリついているため、タスクをこなす時間に別のことに気をとられていたとしても、画面に表示されるのですぐに気づくことができます。 Gmailとの連携もできる! さらに便利
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ:cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ(Twitter/Facebook/Google+/はてなブックマーク/LINE)とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました!ありがとうございます!特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
シンボリックリンクとは まず、シンボリックリンクとは何でしょう。 あるファイルやディレクトリに別の名前を与え、ユーザやアプリケーションがその名前をファイル本体と同様に扱えるようにする仕組み。 引用:シンボリックリンクとは 【 symbolic link 】 – 意味/解説/説明/定義 : IT用語辞典 ざっくり言うとショートカットのようなものなのですが、最も決定的な違いはシンボリックリンクは「実体」として扱えるという点ですかね。使いどころとしては例えば以下のような場合が挙げられます。 Dropbox上のデータをXAMPPなどのローカルサーバーで確認したい ローカルのファイルをDropboxで他の人に共有したい 先述したように、Dropboxにある元ファイルをXAMPP上で確認したい場合、シンボリックリンクを作成すればDropboxでファイル更新があってもXAMPP上のファイルも連動して更新
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
個人的に「探しやすい」と思うギャラリーサイトの特徴 ギャラリーサイトでWebデザインを探していた時、「次へ」ボタンを何回もクリックするのが面倒で、スクロールするだけでページが次々と読み込まれる「無限スクロール」の存在にとても助けられました。 個人的に、以下の3ステップのみで素早く目的のサイトに到達できる構造が好みです。 スクロールする サムネイルをクリックする 新しいウィンドウで該当ページが開く 次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介! straightline bookmark ダークなデザインがかっこいい「straightline bookmark」。ここが1番お世話になっているかもしれません。「tags list」からすぐにお目当てのデザインを検索できます。1番のお気に入りは「レイアウト」で絞り込めること。サムネイルの表示サイズを変更できるのも便利。
「PNG Hat」導入まで プロダクトの有効化 拡張機能の配布サイト「madeby source」から「プロダクトの有効化」を行います。「madeby source」のアカウントが必要なようですね。 新たにアカウントを作成することもできますが、「Facebook」「Twitter」「GitHub」のうちどれかのアカウントを持っていればそのままログイン出来ます。 その後、自分のメールアドレスを入力すると、プロダクトを有効化することができます。 ダウンロード・インストール 下記のボタンをクリックして拡張機能をダウンロードしたら、ダブルクリックしてインストーラを立ち上げます。 インストーラが起動したら、もう一度ダブルクリックしてPhotoshopにプラグインをインストール。その後、Photoshopを再起動したら、準備完了です! Photoshopで拡張機能「Png Hat」を使ってみよう! P
もくじ 【色覚シミュレーションの前に】色覚とは 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ペー
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
1.アシナガペンギン どっとねっと みなさんご存知キュートなアシナガペンギンさん!可愛い外見に似合わない毒舌っぷりが魅力です! しかもアシナガペンギンさん自体「Web制作会社に勤務」という設定なので、Web制作会社でおつとめの方なら「あるある!」というエピソードが多いのではないでしょうか? ヒトコマなのにストーリーがちゃんとできていていつもすごいなあと思います。最近どんどんキャラも増えてきてとても楽しみにしています。また、可愛いペンギングッズの紹介もふんだんにあるので、ペンギン好きにはたまらない! 2.WEB漫画かぴぐらし貧乏フリーランスのいつも フリーランスWeb制作者の方のWEB漫画です。ご自身か身近な方がモデルなのでしょうか。キャラクターの「かぴ」や「ちーぱか」もフリーランスのWeb制作者のようです。 こちらもWebのお仕事をされている方に「あるある!」な情報が満載なのではないでしょ
もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか?本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します! ジョジョの奇妙な冒険 オールスターバトル バァーンッ!!まずはFlashバリバリ!のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です!なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト!ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「
はじめに 今回は、画像を「正方形にして200px×200pxの大きさで保存」という処理を一括で行いたいと思います。たくさんサムネイルを作りたい場合などに便利です。 Firewroksでバッチ処理機能を使う 1.「コマンド」を作る はじめにコマンドを作ります。「コマンド」とはPhotoshopのアクションと同様の機能で、一連の流れを記録させておくことができます。 まずは画像を「正方形にする」処理を実行します。(FireworksにはPhotoshopのような「記録を開始」というものはないので、普通にファイルを開いて実行します) そうすると、ヒストリーに先ほどの処理が残っていると思うので、これを選択し、そのままの状態で右下の保存マークをクリックします。 ※今回は処理がひとつだけですが、処理が複数ある場合はshiftキーを押しながらまとめて選択することが可能です 「コマンドとして保存」というダイ
ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介! 2015 9/25 もくじ ブログの目的など デザイン ラーメンぽい配色 角丸を使って女性らしく 「ゆるっと」感を出すために手書き風に 画像はなるべく使用せず、テキストベースに WordPress サイドバーやフッターは全部ウィジェット 管理画面のカスタマイズ 広告を管理するためのプラグイン「AdSense Manager」 はじめに ラーメン評論家「本谷亜紀」さんとは 本谷亜紀さんは「ラーメン女子大生」として、テレビ朝日「お願い!ランキング」など数多くのメディアに出演し、近年は「女性ラーメン評論家」として活躍されている方です。とても可愛らしくて素敵な女性です。 「本谷亜紀のゆるっとラーメンブログ」とは 私がブログ作成をお手伝いすることになったのは、「男子ハック」の純平(@JUNP_N)さんか
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は? 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう!と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元:少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
今回の試みたブログの見直し 今回行った大きなブログ見直しは以下の通りとなっています。 他の記事への「おすすめ」の仕方を強化 関連記事にサムネイルを追加 facebookの「Recommendation Bar」を追加 サイドバーの充実化 「人気記事」の表示 「はてなブックマークの人気記事」の表示 Facebookページ作成 他の記事への「おすすめ」の仕方を強化 とにもかくにも、願いはただひとつ。時間があれば、他の記事もぜひ読んでもらいたい!…ということで、他の記事への「おすすめ」の仕方を自分なりに強化してみました! 関連記事にサムネイルを追加 今までは記事下に関連記事をテキストのみのリスト表示で出していました。ですが、サムネイルがないとどんな記事かパッと見てイメージがつきづらいし、「クリックしたくはならない」のかなあ…ということで、こちらにサムネイルを追加することに。 さらに、今までのコー
「CSS Nite LP, Disk 25」参加レポート&Photoshop CS6の新機能「CSSをコピー」とCSSPsを比較 2015 1/12 アクセシビリティ (C)田中舘 一久 中根雅文さん、山本和泉さん、植木 真さんによるセッションです。 テーマは「アクセシビリティ」。 「アクセシビリティ」とは Webアクセシビリティとは、基本的には、障害者がWebを利用できることである。もっと具体的にいうと、Webアクセシビリティとは、障害者がWebを知覚し、理解し、ナビゲーション(訳注:広義には、Webサイトのページ間やページ内を移動したり見てまわったりすること)し、インターラクション(訳注:Webに入力したり情報を受け取ったりしてWebを利用)できることである。 ウェブアクセシビリティ基盤委員会 / WAIC: Web Accessibility Infrastructure Commi
はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプログラム情報などが満載のブログです! 今回は、そんなあくちーさんの良記事のひとつ「まるでサイダーみたい!炭酸飲料みたいに気泡が上がってくスクリプトでシュワワのアワワ! : actyway」に沿ってお伝えします! カスタマイズ方法 泡の動き(Javascript) 泡スクリプトのベースは先日Web系ブロガーさんの間でブームを巻き起こした「雪スクリプト」をベースにしているそうなので、そちらを参考に変更しました。 クリスマスに使いたい!雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway そして泡のソースコードはこちら。自分好みにカスタマイズするなら、主に下記のハイライト
懐流体とは 「懐流体」とは「井上デザイン」さんで配布されているフォントのひとつです。 私のブログでもたくさん使わせていただいています! 懐流体の特徴 懐流体の特徴はなんといっても流れるようなS字曲線です!やわらかなラインが独特な雰囲気をかもしだしています。 ためしに宮沢賢治の代表作「銀河鉄道の夜」という言葉でスタンダードな形の小塚ゴシックと比べてみました。 どうでしょう。小塚ゴシックも読みやすくてとても好きなフォントですが、ここでは懐流体が宮沢賢治の幻想的な「世界観」をよく表現できている気がしませんか? また、「懐流体」はフォント自体が少し縦に長く、ところどころキュッとしまっているので、ほっそりと華奢な印象を受けますね。 このように、優雅な曲線が特徴的な懐流体は「大正ロマン」や「昭和レトロ」を彷彿とさせる雰囲気によく合うそうです。たとえばこんな感じ。 ※クリックすると大きくなります レトロ
今回もビッグサイトどーん! いざ、会場へ向かいます!今回は写真素材サイト「ぱくたそ」のすしぱく(@susipaku)さんが出展されているとのことで、さっそく遊びにいきました! こちらがすしぱくさんのブースです。かわいいですね! なんと、ぱくたそのモデルさん「恭平」さんもいらっしゃいました! ベーコン(うさぎさんの名前)のグッズがたくさん!ベーコン大好きの私にはたまりません!! そしてこちらが噂の写真で作った蝶の標本箱!う、美しい…! アーッ!!なんとあの有名なぱくたそのモデルさん大川竜弥さんがグッズ化!!これは買うしかありません! 早速ご本人にサインを書いていただきました!書いている姿も様になりますね! やったー!大川さんありがとうございます( ´ ▽ ` )ノ すしぱくさんのブースにて収穫したグッズはこんな感じ。紙袋も凝っていてほっこりしますね! また、すしぱくさんのブースでは手作りのベ
1. ユーザー名・パスワードを勘ぐりすぎていませんか? ベーシック認証 コアサーバーのphpMyAdminにログインするためには、ユーザー名とパスワードを入れる機会が2回あります。 ひとつめは「ベーシック認証」。 これは、phpMyAdminに入る前にかけられたアクセス制限です。 こ、こんなユーザー名とパスワードなんて…覚えてないぜ!というより、作った覚えすらないぜ!…と、思いますよね?ね…? そうです。実際、デフォルトの段階ではこのユーザー名とパスワードは自分で作っていません。コアサーバーから付与されているのです。 そしてなんと… ここに書いてあります。「ログ閲覧画面の認証パスワード」。 しかもですね、このユーザー名とパスワード、書いてあるまんま入力してください。特にこのパスワード、サーバから付与されたパスワードの上4ケタなのですが、必要なのはほんとに上4ケタだけなので、そのまま入力して
次のページ
このページを最初にブックマークしてみませんか?
『Design Color』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く