はてなブックマーク

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 今日は現在(2018/01/09現在)Chromeで起きている問題をちょっとした事で解決できることが分かったので検証もかねて記事にしてみました。 早速いってみましょうどうぞー！ 問題：Chromeで画像を小さく表示してるとなんだかぼやける(Windowsの場合) お気づきの方も多いかと思いますが、クライアントのサイトをブラウザチェックしていた時ですが、画像にしたテキスト文字がぼやけて見えました。 最初は画像の縦横比が違うのかな？って思って色々チェックしてみたのですが、どうやら違うみたい。 調べた結果、どうやらChrome(Windowsの)でのみ起きている問題だということが判明しました。どうやら縮小する時の処理の仕方がChromeだと他と違い文字がぼや

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 今回は、メモメモ以外で運営しているブログクリエイティブモグモグの投稿画面を少しカスタマイズしたので備忘録としてメモしておきます。 今回のカスタマイズは「記事タイトルを投稿一定期間過ぎたら自動的に変更する」というものです。 なんでこんなことをしたのか？そこも含めて説明させてください。早速いってみましょうどうぞ!! なぜタイトルを変えたいのか なぜこのようなカスタマイズをしたいのかというと、モグモグの美味しいお店紹介の記事を書いていて、SNSに最適な記事タイトルと検索に最適な記事タイトルって違うよなーと感じたからです。 具体的な例を出して、説明しましょう。 前提として、僕のブログの更新スタイルは、記事を書いた後にTwitterやFacebookで通知をして

スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、井畑です。 先日1/20に、前々から作りたいなーと思っていた、ごはんメモブログ「クリエイティブモグモグ」をリリースしました! 今回はそのご紹介と、デザインやコーディング時にこだわったところや頑張ったところなどをまとめたいと思います。 それではどうぞー!! クリエイティブモグモグとは クリエイティブモグモグは「大好きな人たちとおいしいご飯を食べる為のメモブログ」というコンセプトのもと、産まれたごはんメモブログです。 もともと、美味しいものを食べるのも作るのも大好きだったので、制作する構想はずーっとあったのですが、やっと公開することができました。作る情熱を持ち続けるのはなかなか大変ですねー(遠い目) カテゴリーが「作ってみた」「行ってみた」「ご

こんにちは、井畑です。 今日は隣の席のデザイナーさんにこれどうやったらいいと思う？って相談された時に思いついたCSSの組み方がなかなかいいなと思ったので、ご紹介します。 かなりニッチですが、どなたかの参考になれば幸いです。 それではどうぞ!! コンテンツは右寄せだけどコンテンツ内のテキストは左寄せでコンテンツは内容が適宜変更されるかもしれない 今回実装したい要件です。 コンテンツ自体は右寄せにしたい コンテンツの中身のテキストは左寄せに コンテンツの中身のテキストは変更することもある(コンテンツの中身の幅は変わることもある) 今回のポイントはコンテンツの幅が変更するかもしれないってとこですね。 コンテンツの中身の幅が変わらなければ超簡単ですが、変わるということなので数値指定するとできないよなーと思い、考えた方法はこちらです。 実装してみた じゃじゃん!右下の「有限会社〜」の部分が実装したか

こんにちは、井畑です。 今日はかなりニッチな話ですが、Photoshopの小技を思いついたのでご紹介いたします。 Photoshopで二重罫線を使う際の小技です。それでは早速どうぞ!! 二重罫線とは 文字通り二重の罫線です。 よく、リストとかに使われますね。 僕の悩み:二重罫線をPhotoshopでデザインする時にレイヤーを2つ使うのが嫌 さて皆さんはこの二重線をPhotoshopでデザインする時どうやって作成しますか？ 下図のように長方形ツールかラインツールを二つ使って作る人が多いのではないでしょうか? もちろんこれで問題無いと言えば無いのですが、個人的にはレイヤーを２つ使ってデザインしているのがちょっと嫌でした。 二重罫線の量が多くなってくるとその分レイヤーが２倍に増えていき、PSDが煩雑になるからです。 そこでこれを解決すべく思いついたのが、一つのレイヤーで二重罫線を作る方法です!作

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、井畑です。 9/12に行われた「WCAN 2015 Autumn」でスピーカーに初挑戦してきました。 登壇直前は緊張しすぎてほんとに吐きそうでしたが、終わった今は思い切って挑戦してみて良かったなーという感想です。 それでは、スライドシェアだったり、気をつけたポイントのまとめいきます！どうぞー！！ 「Webデザイナーが考えておきたいSEOのこと」スライド 以下が本番の際に使用したスライドです。ご覧くださいー。 Webデザイナーが考えておきたいSEOのこと スライド作る時に気をつけたこと 今回のセッションは、SEOを絡めたデザインの話をしました。 テクニカルな話や伝えたい事が多かったので、話やスライド自体に興味をもってもらう意図で、右下に動物た

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、井畑です。 今回はPhotoshopのレイヤーの整理の仕方やルールについて自分で決めている事をご紹介したいと思います。 「他の方はどうやってレイヤー整理してるのるかなー？」と気になって、まずは自分で公開してみることにしました:) もちろん、自分のやり方がベストだとは思ってはいないのですが、ある程度カンタンにできて、ある程度それなりに整頓できるやり方かなーとは思っています。 それでは、早速ご紹介します。どうぞー!! このPhotoshopレイヤー整理ルールのポイント このルールの「ポイント」は次の２点になります。 整理する時間が決まっている ポイント一つ目は整理する時間・デザインする時間を分けているところです。そうすることで、それぞれの作業を

こんにちは。井畑です。 Photoshopでデザインをしているとレイヤーの量が膨大になって、レイヤー迷子になる事って多くないですか？ レイヤーが重なりまくっているので選びたいレイヤーがあっても、上のレイヤーが邪魔してなかなか選択できない…Photoshop使いなら誰もが経験した事あると思います。 今回はそんな時にちょっとレイヤーを探しやすくなる小技をご紹介します。 それではどうぞ!! 選択したいレイヤーの上で右クリックするとクリックしたところにあるレイヤーの一覧が現れる やり方は簡単で、選択したいレイヤーの上で右クリックをするとそのクリックしたポイントに重なり合っているレイヤーの一覧が現れます。(PhotoshopCC、CS6で出来ること確認済み) 図説すると以下のような感じです。 後は、選びたいレイヤー名を選択すると、そのレイヤーが選ばれます。クリックするポイントは厳密でなくても割とその

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、井畑です。 最近、暇つぶしの時にハマっているサイトにGuess the Hexというのがあります。これは6桁のカラーコードより、色を推測して当てるゲームです。１ゲームで３回間違えるとゲームオーバー難易度は3段階に分かれています。 最初は全然でしたが、今では一番難しいコースを3回に1回成功するくらいには上達してきました:) 先日、友達にこのサイトの事を話したら、「なぜそこそこ当てられるのか」と結構気持ち悪がられました。 もちろん、色のコードを暗記していて答えている訳ではなく、カラーコードの意味、理論からこんな色だろーなーというのを推測して当てにいっているのですが、そこが分からないと結構キモいようです。 そこで、今回はこれ以上気持ち悪がられない

こんにちは、井畑です。 前々から好きでよく見ているデザインギャラリーサイトMUUUUU.ORGでサイドメニューがぬっと出てきてメイン部分の背景がぼやけるのかっこいいなーと思ったので、実装できるか挑戦してみました。 調べたところ、CSSのfilterを使うのがお手軽な感じだったので、それを採用しています。それではどうぞー!! サイドメニューがぬっと出て来てぼやけるサイドメニューの作り方 順を追って説明します。まずは基本的なサイドメニューの作り方です。 まずは、サイドメニューを作る 今回はぼやけるのを確認しやすくするために、背景を写真にして作成しました。ねこねこ。右上の「menu」を押すとサイドメニューが現れます。 See the Pen 普通のメニュー by Tetsuya Ihata (@tihata) on CodePen. サイドメニュー作成時のポイント ポイントはメニューとメインの部

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。 ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。 やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ！ 三角形を使ったデザイン 三角形を使う場合、余白をどう活かすかが重要になってくると思います。 Snowbird Snowbird コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近は神速Photoshop[Webdesign編]を読んで、ますますPhotoshop愛が深まっております。井畑です。 今回はPhotoshopのヒストリー機能の1つ「スナップショット」について説明します。Photoshopを使っていて割と使うことが多い「ヒストリー」ですが、最近までこの「スナップショット」について知りませんでした。 使いこなせば結構便利なので是非チェックしてみてください!!それではご紹介します。どうぞ! その前にPhotoshopの「ヒストリー」について 知っている方も多いかもしれませんが、スナップショットの前に「ヒストリー」について簡単に説明します。 「ヒストリー」はその名の通りPhotoshopで行った作業を前の状態

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。Phothoshopとボールは友達！最近フットサルをはじめました井畑です。 今回は以前記事にもさせてもらったPhotoshopのスマートオブジェクトを元のレイヤーのデータに素早く戻す方法を見つけたのでご報告させていただきます。 スマートオブジェクトは便利ですが、一度スマートオブジェクト化してしまうと、元のPSDデータにスマートオブジェクト化する前のデータをもってくるのがめんどくさいものでした。(スマートオブジェクトのレイヤーをダブルクリックし展開して、そのデータを元のPSDデータにもってくるっていう)それをワンタッチでできる方法です。 僕は意外とスマートオブジェクトを元のレイヤーデータにもどして、複製したい場合があったりするのでこの時短は結

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは、Photoshopは6.0のころから使っています。井畑です。 今回、株式会社KADOKAWA様より「神速Photoshop[webデザイン編]」ご献本頂きました。書評を持って御礼とさせていただきます。 前シリーズの「神速Photoshop[グラフィックデザイン編]」の続編で、今回はWebデザインの際に役立つtips/機能の紹介に特化した本となっています。キャッチコピーの「だから、あなたは忙しい。」うまいですね。 読んでみて、特にステキだなと思ったところを紹介させていただきます。 それではどうぞ！ 初期設定大事。絶対 この本を読んで、まず良いなと思ったのが初期設定時の項目の多さです。 Photoshopに限らずですが、こういったツールは初期設

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは！最近日が長くなってきたことを嬉しく感じます。井畑です。 今回はブログのデザインをリニューアルしましたので、その際にこだわったポイント等を備忘録としてまとめておきます。 もちろん、「ココ何かへんじゃない？」等の突っ込みもおまちしております。それではどうぞ！ と、その前に以前のデザインを紹介 新しいデザインの説明の前に、昔のデザインも紹介しておきます。このブログのリデザインは2回目です。1回目は１年ちょい前ですね。以前のリニューアルの時も記事にしたので気になる方はそちらも是非ごらんください:) 比較用に初代と２代目のキャプチャも貼っておきます。テイストは違えど、両方とも「メモや紙」っぽいデザインを意識して作成しました。 こちらが初代デザイン。可

こんにちは。転職して、コーディングする機会も増えてきましたコーダー初心者井畑です。 今回はスマホのコーディングで苦戦したところがあったので、備忘録としてメモしておきます。 同じような悩みをもっている方の助けになれば幸いです。それではどうぞ! 今回作りたいもの 今回作りたかったのは、上図のようにデバイスの幅にあわせてサイズ可変するメニューボタンです。 問題は、メニューボタンを背景画像(background)として表示することです。これが難しかった… 問題点:背景画像の高さ指定がうまくいかない… 背景画像(background)の幅はデバイスの幅サイズによって可変できるので問題ないのですが、高さは基準となるサイズが無いので、指定しないと高さが0になってしまいます。 だからといって高さを100pxのように指定してしまうと、デバイス幅が変わった時に画像が切れたり、無駄な余白ができてしまいますX(

こんにちは。冬はもっぱら一人鍋井畑です。最近ぐっと寒くなってきましたね。 今回はGIFアニメーションの効果的な使い方や上手く見せるポイントを語ろうと思います。以前から結構作る機会があって割と慣れ親しんでおり、好きなんですー!GIFアニメ;D 紹介する為にGIFアニメを貼りすぎてページが若干重いですがご了承下さい。それではどうぞ!! GIFアニメーションとは GIFアニメ。Web上で動きのある表現方法の一つです。パラパラ漫画のように何枚かの静止画が時間ごとに切り変わる仕組みです。 GIFアニメの他にもjQueryやFlashやCSS3等で動きのある表現ができますが、一番昔からある手法です。(多分) 昔からある分、古くさいとかサイト表示が遅くなるなど、敬遠されがちな部分もあります。しかし、難しい技術も必要無く作成でき、どんなブラウザでも同じように表現されるGIFアニメが僕は好きです。 そりゃあ

こんにちは。井畑です。 本日をもって3年間働いた会社を退社いたします。 この会社では、ほぼWeb制作素人だった僕に色々チャンスを与えていただき、大変でしたが、勉強になった3年間であったように思います。 3年間がむしゃらに頑張ってきたなかで、僕にも後輩ができました。 今回はそんな後輩達に向けてデザイナーとして社会人として覚えておいてほしい事を超偉そうにまとめてみました。 今回は後輩が読むとぐっとくる仕様となっています。弊社現状を知らないとチンプンカンプンなことや、逆によくライフハック系の記事で見かける名言等も多々あります。後ブラック乙とも言われそうですがその辺りはご了承ください。 自戒の意味も込めて…それではどうぞ!! WEBを好きであれ 毎日遅くまでやっていて大変だと思う。でも、Webを好きであってほしい。 君達は今、昔からなりたかった「Webデザイナー」という打席に立っている。未熟がゆえ

こんにちは。食欲の秋まっしぐら井畑です。 今回は、Photoshopのショートカットを整理していたらステキな設定を見つけましたので、ご紹介したいと思います。 そのステキな設定とは「レイヤースタイルのコピー＆ペースト」のショートカットです。結構めんどくさい作業だったのですぐに設定しました;) さぁ詳しい説明しますよーそれではどうぞ!! レイヤースタイルのコピー/ペーストを設定すると幸せになれる レイヤースタイルって何？ ショートカットの説明の前に、レイヤースタイルについて軽く説明をしておきます。 レイヤースタイル(レイヤー効果)とはPhotoshopでレイヤー(図形レイヤーや文字レイヤーetc…)にたいして装飾や効果を設定できる機能のことをいいます。これを使えば、長方形に境界線をつけたり、文字にドロップシャドウをつけたりするのがとても簡単にできるようになります。 レイヤースタイルは一度作成す

こんにちは。 さっきiPhoneをiOS7にアップデートしました。井畑です。 iOS7になって見た目も一新され、とっても新鮮な気分です。壁紙に視差効果がついたのはすごいですねー。なんやかんや言われる事の多い視差効果ですが、僕は好きです:) アップデートに伴い、今まで使っていた壁紙がなんだかぼやーっとして見えるなーと感じたので、良いものはないかと見つけたのがこちらiOS 7 Wallpaper.netです。 なかなか良さげだったのでシェアしておきます。アップデートして、壁紙がぼやけたり合わないな？と思った方がいましたら是非ご覧くださいー! それではどうぞー!! iOS 7にあった壁紙がいっぱいあるギャラリーサイト「iOS 7 Wallpaper.net」 調べてみたところ、やっぱりiOS 7にすると、視差効果(簡単に言うと、iPhoneを傾けると背景が動いて立体的に見える効果)の関係で、壁紙