スマホサイトも作る前に！Web初心者の依頼主と確認したい2つのこと - デザインメモ
「Webサイトを作って欲しい。あと、スマホ版も作ってもらえると…。」 あまりWebに詳しくない方とお仕事をする機会があって、ちょっと私の説明が悪くてうまく理解してもらえず困ったことがありました。なので、どうしたらWeb初心者の方にわかりやすく説明できるかな・確認できるかなと思い、自分の反省を含めて書いてみました。 （※図のスクショ画像は例です） 依頼内容は簡単に言うと、上記にも書いたようにWebサイトのPC版とスマホ版が欲しいということでした。 1、とりあえず「動き」を確認する 一番最初に確認しておくべきだなと思ったのは、 Webサイトに訪れた際の「動き」です。 あるWebサイトへ訪れた際に、 A）見ている端末（PCやスマホ）によって「自動で表示切替する」方がいいのか？ はたまた、 B）スマホで訪れた際にポップアップを出して、PC版で見るのかスマホ版で見るのか選ぶことができるのか？ それと
グリーン！配色が緑系のWebサイトデザイン11選 - デザインメモ
配色が「緑」を中心としたWebサイトデザインを集めてみました。 緑という色は安全・平和・リラックス・健康・自然などを想像させるので、よく使われる色ですね。 私が緑色を効果的に使ってると思ったWebサイトデザインを集めてみたので、配色の参考にしてみてください。 （※カラーコードはスクショ画像から抽出した色なので厳密な色ではありません。） １、B&B 2、ガーデニング・エクステリア・外構｜インナチュラル 3、フロッシュ | 旭化成ホームプロダクツ 4、共栄製茶株式会社 5、岐阜県池田町の造園屋｜グリーンラボすえたけ 6、心斎橋のネイル＆まつ毛エクステ専門店 | アール 7、サラダホーム 8、豆苗研究会｜村上農園 9、オーストラリア-トップエンドの旅 10、熊本・玉名で、"自然の営み"をお手本とした酪農を行う牧場｜玉名牧場 11、Nobuaki Honma – Portfolio 色のまとめ 緑
はじめてのパスワードでアクセス制限（ロリポップ！ver.） - デザインメモ
はじめて「Webページをパスワードでアクセス制限」というのものをやってみたので、自分のメモも含めてご紹介します！ 今回はレンタルサーバーの「ロリポップ！」を使用した例です。 私自身あまり今まで必要性がなくてやったことがなかったのですが、ふと必要になったときにご活用ください。 ※MacOSXでGoogle Chormeを使用した環境で紹介しています。 目次 1、ロリポップ！FTPを開く 2、アクセス制限したい場所を用意する 3、.htaccessファイルを作成する 4、.htaccessファイルに書くこと・設定すること 5、.htpasswdファイルを作成する 6、.htpasswdファイルに書くこと・設定すること 7、確認する 1、ロリポップ！FTPを開く 今回はFTPソフトを使っていちいちアップロードするには面倒なので、「ロリポップ！FTP」を使って解説していこうと思います。 まず、ロリ
これからますます必要な存在になりそうな「SVG」とは？ - デザインメモ
Webサイトやアプリで画像を扱うとき、「SVG」という形式があるのを知っていますか？ 私も最近までほとんどその存在を知らなかったのですが、ここ最近の技術と思いきや、じつは規格としては2001年から登場しているようです。10年以上も経ってる！ なぜ私がここで注目しているのかというと、近年の流行であるレスポンシブ対応やスマホアプリで便利なのが「SVG」らしいのです！ 今回はざっくりとSVGについて調べたことを書いていこうと思います。 目次 ・SVGとは？ ・SVGを実際に使ってみる SVGとは？ SVGは「ベクター形式」 普段、Webサイト用に画像を保存するときはGIF、JPEG、PNGなどを使いますよね。これらはピクセルによって描かれた画像「ビットマップ形式（別名：ラスタ形式）」と呼ばれるものです。 それに対して「SVG」は、シェイプ、パスなどを使用した「ベクター形式」によって描画する方法で
Illustratorで波線（ジグザグ）を作る方法 - デザインメモ
資料に画像を貼る時に長いからちょっと省略したいなと思い、波線をパスで描こうとしたのですが…あれ波線ってもっと簡単に作れなかったっけ？と、すっかり作り方を忘れていました。 省略波線以外にも応用がききそうなので、自分のメモ用にも書き留めておきます。 直線ツールで一本の線を引いて、 メニューバーの「効果」→「パスの変形」→「ジグザグ」を適用します。 設定するウィンドウが出てくるので、数値を調節します。プレビューにチェックを入れると、みながらできますね。最初はギザギザですが、ポイントの滑らかにすれば波線になります。 以下省略ができました！簡単！ 鈴木：ジグザグって書くとなんだか可愛い響きと文字列ですね（笑）今日は東京でも雪が降りましたね。結構大粒だったので、雪を見慣れない私は窓の向こうで雪が風で舞い上がるのをしばし眺めてました。眺めるのはいいですが、外に出たら極寒！！今日は立春なんですよ。暦では春
新人デザイナーさんへ、これは知っておきたいMacのFinder設定3つ - デザインメモ
普段のちょっとしたことを便利にしておくと、作業スピードがアップしますよ！ ということで、新人デザイナーさん、Mac初心者さん、その他Finderがいまいち使えこなせない皆さま、 まずは「Finder」の設定・カスタマイズをしていきましょう！ ※今回説明していく環境はMac OS X（Mavericks）です。 目次 1. Finderにパスを表示 2. Finderの上部にアプリのショートカットを表示 3. Finderのよく使う項目の活用 1. Finderにパスを表示 Finderのパスとは、Webサイトでいうパンくずリストのようなものです。 今選択しているデータがどこの中に入っているのか一目でわかります。 設定方法 Finderのメニューバーから 「表示」→「パスバーを表示」をクリックします。 2. Finderの上部にアプリのショートカットを表示 Finderの上部にアプリのショー
Illustratorでキラキラ（クロスハッチ）を簡単に描く方法 - デザインメモ
覚えておくと便利な、Illustratorで簡単に描けるキラキラの作り方をご紹介します！ キラキラって「クロスハッチ」というらしいです。 いつもファイル名にkirakiraって名前つけてた…！笑 Illustratorの効果「パンク・膨張」というのを使います。 step1. まずは、楕円形ツールで丸（正円）を描きます step2. 次に上のメニューから「効果」→「パスの変形」→「パンク・膨張」を選択します step3. すると下図のようなウィンドウが出てくるので、数値を入力します プレビューのチェックを入れるとリアルタイムで確認できるので、微調整してみてください。 あとは上メニューの「オブジェクト」から「アピアランスを分割」すればPhotoshopなどにも持っていけます〜！ おまけ ちなみに、今回上の紹介では楕円形を使いましたが、他の形に適用すると違う形のキラキラになったりします。 いろい
プチプチが消えるかも？！フラットデザインとボタンを考えてみる - デザインメモ
立体的なボタンを押しこむことについて考えてみました。 つい先日iPhoneのアップデート「iOS7.1」はもうしましたか？ 私はそのアップデートで「キーボード」が気になりました。 微妙な変化ではありますが、キーボードが色の明暗がはっきりして前より立体的に見えますね。 私はやっぱりこっちの方が押しやすいですし、なにより気持ちが良いなと思いました。 なぜ、気持ちが良いと感じるんだろう？ ボタンを押すのって、なんだか気持ちが良いですよね。 押すと必ず何かが起こるので、ワクワクもします。 だからこそ、小さい子どもは好奇心にかられて 街中のいろんなボタンを押したがりますし、 オトナだって、梱包材のプチプチをつぶすのが大好きです。 （↑【∞(むげん)プチプチ公式サイト】人は、プチプチせずにはいられない・・・。） ボタンを押すと何か良いことが起こる？ 生活のいたるところに「ボタン」はあふれています。 自
Instagramの写真をコンビニでプリント！「BiziCard」を試してみました - デザインメモ
Instagramの写真を自宅でプリントするのは、なかなか手間なものです。 そこで、スマートフォンやSNS上にある写真を、簡単にコンビニでプリントできるアプリ「BiziCard」を使って、実際に写真プリントしてみました！ 今回は「Instagram」の写真に着目してお伝えします！ BiziCard : http://www.bizicard.net/service/ 1. アプリをダウンロード App StoreまたはGoogleplayで「BiziCard」をダウンロードします。 アプリ自体は無料です。 2. 新規登録 新規登録で今回は「Instagram」でアカウントを利用しました。 「Instagramアカウントでログイン」を選んだら下図のような画面に移動するので、 Instagramのユーザーネームとパスワードを入れしましょう。 3. Instagram 写真プリントをタップ 登録
そういえば「iPhoneにしなければ良かった」と思ってた - デザインメモ
2013年は、WindowsやiPhoneをはじめとする、フラットデザインが広まった年でしたね。ですが、フラットデザインという言葉が広がり始めて間もない頃、私はその流れに嫌な印象を持っていました。 ボタンはボタンっぽくなくなり、文字の説明になったり…。 おそらく、それは「普通じゃない」「見たことがない」ような恐怖があったのではないかと思います。「普段の生活に突然現れた新しいもの」に対して、 何かしら違和感を感じていたのかもしれません。 でも、私が愛用しているiPhoneを初めて買った当初を振り返ってみると、 それまではガラケーを使っていた私は、 初めてiPhone3Gを手にして1ヶ月か2ヶ月ほど 「iPhoneにしなければ良かった…」と後悔していました。 （iPhone 3G） 余計なところを触ってしまったり、ボタンを押すという感触がなくて違和感があったり、いつの間にか電話をかけてしまって
寒い冬に癒やしを。猫たちのぬくぬく画像を集めてみました - デザインメモ
風が冷たく、身にしみる寒さになってきましたね。私もさすがにさらに厚めのコートを出したんですが、それでも寒かったです…。でも、こんな寒い冬にこそ、我々にはモフモフの猫がいるではありませんか！ ということで（笑）、今日はいつものブログから脱線して『Twitterで人気の猫画像ベスト426―「可愛い」から「笑える」まで – NAVER まとめ』やGoogle画像検索より、寒い冬にこそ癒される猫画像ちょこっとだけ集めました。完全に私得ですが、作業の息抜きにでもどうぞ〜。 （出典：blog.goo.ne.jp/yorozu-haki/） （出典：netatama.net） （出典：1.bp.blogspot.com） （出典：blogs.yahoo.co.jp） （出典：neko-go.com） （出典：nekomemo.com） （出典：infoneco.blog.fc2.com） （出典：mat
嗚呼、これぞ至福のひととき。Pinterestで黒猫写真を集めてました - デザインメモ
癒しが欲しいなら自分で作ってしまおう！ ということで「Pinterest」を使ってみました。 画像収集にはもってこいのWebサービス。海外のサービスですが、最近では日本語対応もしてくれて使いやすくなりました。 私は「Pinterest」の存在を知っていながらもあまり活用できていなかったので、今回は俺得な使い方（？）をしてみました！ 1. ひたすら黒猫を「ピン」！ Pinterestの使い方はとても簡単で、アカウント登録したら検索して、気に入った画像を「ピン」という赤いボタンを押していきます。 2. うっとりと眺める そうするとあっという間に、かわいい黒猫写真の一覧ができちゃいます。 http://jp.pinterest.com/karasuneko/black-cats/ あとは眺めるだけ。嗚呼、かわいい。 ぜひ、あなたもお気に入り画像をピンして、PCの前でうっとりと至福のひとときを過ご
人の心を動かすブログを書きたい - デザインメモ
今日は何のネタの記事を書こう…。 今日は仕事も休みだったのでぼんやり漫画を読みながら一日をだらだらと過ごして、やっとPCの前に座りました。最近は別に楽しい気持ちでもなく、ブログを更新することは義務のような、作業のような感じになっていました。 これは違うんじゃないか…？ 私にそう思わせてくれたのは、「ブログ更新の気力を失ってました」という記事でした。 最近のルーティン化したニュースアプリでチェックをしているときにたまたま見つけた記事で、なんとなくそのタイトルが目に留まりました。内容を読んでいると、どんどんその人の言葉に引き込まれるように、気づいたら最後まで読んでいました。 記事の内容は、その人がブログを書き始めて、慣れない本を読んで、批判を浴びて…ブログを書くのに四苦八苦しているのを書きつづったものでした。私はきっとこの記事につづられた素直な言葉たちに心ひかれたんだと思います。 私もこんな、
HelveticaとArialのどちらが美しい？ - デザインメモ
グラフィックやWebなど文字に関わる人なら誰もが知っていると言っても過言ではない王様フォント「Helvetica」。Macでは標準で入っていますが、Windowsには入っていません。なので、WindowsではHelveticaの代わりとして「Arial」というフォントが使われます。 HelveticaとArialはとても似ているフォントですが、実際にどのくらい字形や印象が違うのでしょうか？ 字形の違い colisさんで下記のような記事が紹介されていました。 ArialとHelveticaの違いがはっきりと分かるこの一枚 画像をみるだけで形の違いがわかります。（青がArial、赤がHelvetica） arial & helvetica (via: swissmiss) Helvecitaの方が少し手書きの名残りを残したような柔らかい形をしていますね。 どっちがHelvetica？ 企業ロゴ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイン関連の話題まとめ！Weekly News vol.17（11/3〜11/9） – デザインメモ
Webデザイン関連の話題まとめ！Weekly News vol.16（10/27〜11/2） – デザインメモ
シンプルな丸っこい人のイラスト無料素材 - デザインメモ
Webデザイン関連の話題まとめ！Weekly News vol.15（10/20〜10/26） – デザインメモ
Webデザイン関連の話題まとめ！Weekly News vol.14（10/13〜10/19） – デザインメモ
Webデザイン関連の話題まとめ！Weekly News vol.13（10/6〜10/12） – デザインメモ