P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

CSS3:clip-path:polygon用ジェネレーター「Clippy」が便利

珍しく本業(ホームページの作成)が忙しくなり、更新が滞っておりました。 久しぶりですが、こんにちわ。@PNRAです! 今日は最近見つけた便利なジェネレーター「Clippy」をご紹介しようと思います。 はじめに CSS3の登場以降、CSSで実装できる守備範囲が広…

海外の飲食店のホームページから見る、魅力的な「魅せ方」とは?

どーも、中野区でホームページ作成やってます。@PNRAです! 昨日は、国内のカフェ・喫茶店のホームページを参考に、「人が集まる」ホームページについて話をしました。 東京の人気カフェ・喫茶店のホームページから見る「人が集まる」デザインとは? そこで…

東京の人気カフェ・喫茶店のホームページから見る「人が集まる」デザインとは?

どーも、中野区でホームページ作成やってます。@PNRAです! カフェや喫茶店のホームページを設計する上での重要な点はご存知でしょうか? 今回は、実際にカフェや喫茶店を営んでいる方、またはこれから事業を始めようとお考えの方に是非読んで頂きたい内容…

jQuery基礎講座:するっと動くドロワーメニューの作り方(ZIP付)

jQuery基礎講座[第10回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 以前ハンバーガーナビゲーションに関する記事をいくつかあげましたが、そこの応用版のお話。最近スマートフォン向けのホームページで…

jQuery基礎講座:タブ切り替えを用いた特定要素の表示・非表示を実装する(ZIP付)

jQuery基礎講座[第9回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 今更感たっぷりですが、タブ切り替えを使って任意の要素の表示・非表示を制御するものをプラグインや外部ファイルを用いずjQueryを使っ…

Three.js:初心者がWebGLプログラミングを0から学ぶ[第一回]

どーも、中野区でホームページ作成やってます。@PNRAです! プログラミングずぶの素人がWebGLプログラミングをマスターしてリッチな表現をマスターしてドヤ顔するための不定期連載を始めたいと思います。時間を見つけて更新していくので、適宜チェックして…

CSS:box-shadowで作るフォトブックモックアップ

どーも、中野区でホームページ作成やってます。@PNRAです! Antennaさんのホームページを見ていたら素敵な表現があったので、備忘録として押さえておきたいと思います。(使いどころは分からないものの(笑)) 押さえておきたい表現というのがこちら 関連…

jQuery基礎講座:スクロールに応じたビジュアルの拡大・移動で、パララックスライクなお手軽錯視効果を実装する(ZIP付)

jQuery基礎講座[第8回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 ちょっと久しぶりの更新ですが、今回は何度もやっている、スクロールに応じた挙動の制御を変数で行います。画像への指定がスクロールに…

ウェブサイトの色彩設計のチートシート『Spectral』が便利!

どーも、中野区でホームページ作成やってます。@PNRAです! ホームページの配色悩みますよね。コンセプトカラーをサービス内容や事業傾向に合わせて大まかに決めた後、具体的な色を決定づけるまで。またその他の配色をどうするのか、これが意外と難しい。 …

フリー素材 履歴書 モックアップまとめ - 01

どーも、中野区でホームページ作成やってます。@PNRAです! 今日は海外のクリエイティブな人々の履歴書のデザインをまとめていきたいと思います。履歴書ひとつとっても、お洒落なものが多くてびっくりなのですが、国内ではまだまだ定型に当てはめたイメージ…

フリー素材 iWatch モックアップまとめ - 01

どーも、中野区でホームページ作成やってます。@PNRAです! iWatchのモックアップがだいぶ出回ってきたので、「あ、これかっこいいな」「これ使いやすそうだな」といったものをまとめておきました。フラットデザインからフォトリアリスティックまで色々と。…

素敵なフラットデザインを実装のために!参考にしたいカラーチャート / ギャラリー

どーも、中野区でホームページ作成やってます。@PNRAです! フラットデザイン、マテリアルデザインという近年のデザイントレンドを取り入れる際に便利なウェブサービス、まとめサイトをご紹介したいと思います。 flatuicolorpicker まずはフラットデザイン…

GoogleMapデザインカスタマイズ 実装例と便利なTips

どーも、中野区でホームページ作成やってます。@PNRAです!今日はGoogle Mapのデザイン変更に関するTipsをご紹介したいと思います。 「グーグルマップのカスタマイズってどうも敷居が高そう…。」「難しそうだし、マップをIMG画像にしようかな」なんてお考え…

Freebies materials clip 09

どーも中野区でホームページの作成やってます。@PNRAです! ホームページのモックアップや資料作成を効率的に行うためのフリービー素材、弊社が今月ダウンロードし、利用させてもらったものを掲載したいと思います。 IOS 8 Vector App UI Kit イラストレー…

jQuery基礎講座:スクロールして要素が出現したらアニメーションを実行する方法(ZIP付)

jQuery基礎講座[第7回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 表題の通り、スクロールするとアニメーションを実行する、というものを作っていきたいと思います。これは、ウィンドウのスクロール量と…

伝統色を探すならこれで決まり!和色のカラーコードをお洒落にまとめた「NIPPON COLORS」

どーも、中野区でホームページ作成をやっています。@PNRAです! ホームページの作成のご依頼をお請けする際に、最初の打ち合わせでクライアントさまから「あ、赤色が好きなので、赤っぽいデザインにして下さい」というような言葉をいただいたりします。これ…

Photoshopの作業が鬼のように捗る拡張機能『Pictura』:作業画面上からFlickrの画像(商用利用可)が引用できるぞ!

どーも、中野区でホームページ作成をやっています。@PNRAです! これはデザイナーであれば必見の拡張機能なのではないでしょうか?重宝すること間違いなしの拡張機能『Pictura』をご紹介します。ホームページのモックアップやUIサンプルを作成する際に使用…

jQuery基礎講座:スクロール量に応じて要素(ヘッダーなど)を固定する(ZIP付)

jQuery基礎講座[第6回] どーも、中野区でホームページ作成をやっています。@PNRAです!備忘録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 今回はちょっといつもより高度な内容を見ていきたいと思います。表題の通り、ウィンドウの…

jQuery基礎講座:スクロール量に応じて出現するナビゲーションエリア(ZIP付)

jQuery基礎講座[第5回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 前回のjQuery基礎講座:ハンバーガーナビゲーション実装サンプル(ZIP付)に引き続き、今回もナビゲーション周りをいじくっていきたいと…

あの有名ブランドのカラーコードは?僕が使っている参考サイト3選

どーも、中野区でホームページを作成しています。@PNRAです! 「あの有名ブランドのカラーコードってなんだろう?」ホームページを作成していると、有名ブランドのロゴカラーを調べることがあります。特にソーシャルメディアのアイコンや背景には頻出です。…

国産サービス対応のアイコンフォント『Ligature Symbols』を実装してみた。

どーも、中野区でホームページ制作やってます。@PNRAです! アイコンフォントに関するTipsです。普段は汎用性の高いFont Awesomeを利用させていただいています。なんといってもフォント数が豊富なのとコンポーネントが豊富なのが魅力です!がしかし、海外の…

feedlyのアイコンフォントを作ってみたら想像以上に簡単で笑えた件

どーも!中野区でホームページ作成をしている@PNRAです! ホームページ作成に携わっている方なら誰しもが活用するであろうアイコンフォント!つくづく便利です!有名どころでいえば、「font awesome」や「Foundation Icon Fonts」などが思い浮かびますが、…

jQuery基礎講座:ハンバーガーナビゲーション実装サンプル(ZIP付)

jQuery基礎講座[第4回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 過去2回に渡ってクリックアクションに関する記事を更新し、前回はウィンドウの高さを取得する方法をみてみました。そこで、これらを組み…

YoutubeやVimeoなどの埋め込み動画を簡単にレスポンシブ対応させる方法

どーも@PNRAです! ブログを書き始めて、何度かつまずいた箇所だったので、忘備録として抑えておきます。YoutubeやVimeoといった埋め込み動画をレスポンシブさせる方法で、iframeやobject、embedなどといった埋め込みに使える小技です。 YoutubeやVimeoをレ…

年代別のロゴデザイントレンドから、これからのデザインを考える

どーも@PNRAです! 最近クックパッドが世界展開に向けてロゴデザインを変更したことがホットトピックとしてエントリーしていましたが、今年(2014年)に入って世界の有名ブランド(PayPal、VISA、Bacardi)も続々ロゴを変更してきています。 どのブランドのリ…

フォント指定はコレで決まり!僕の考える最高のfont-family(CSS)-2014年

どーも@PNRAです! 今日は弊社がオススメするフォント指定について話をしていきたいと思います。 ホームページ作成において、フォントが持つ印象はウェブサイトの印象を大きく左右します。特に欧文書体(英字)と異なり和文書体(日本語)は、デフォルト設…

PCサイトとスマートフォンサイトを分けてデザインしたい場合のリダイレクト実装方法

どーも@PNRAです! いまさら?って感じのタイトルですが、意外とオーダー頂くことの多いPCサイトとスマートフォンサイトを別に作るというオーダー確かにRWD(レスポンシブウェブデザイン)だと、どうしてもデザイン的成約や制限がかかってくるためそれぞれ分…

Wordpressでの404エラーページの作り方

どーも@PNRAです! Wordpressでオリジナルテーマを1から作っている方は、忘れがちな404エラーページ! Wordpressの場合、何も設定していなくてもindex.phpに飛ぶように設計されているため大きな問題はないですが、リンク先が任意のページでなく、トップペ…

ルイ・ヴィトンの創業160周年記念リミテッドエディションがヤバ過ぎて泣ける…

どーも@PNRAです! ルイ・ヴィトンが大変なことになっています。創業160周年を記念してリミテッドエディションをリリースするってニュースが以前流れていましたが、いよいよ間近になってきてそのラインナップがお目見えし始めました。 もう格好良過ぎて泣き…

知っておきたい!meta,.htaccess,PHPでリダイレクトする方法

どーも@PNRAです!ドラえもん作品、大好きなのですが、「ちょくちょく出口が意図しないところに繋がってるよな〜」と懐かしみながら、今日はリダイレクトのお話。 ホームページを生業にしていると、『ページの移動・削除』『ホームページの移転』といったイ…

世界の名刺デザイン30選!~名刺デザインから見るブランディング~

どーも@PNRAです! 何気なく配ったり、置いておいたりする名刺やショップカード、皆さんは拘りを持っていますか?ただなんとなく情報を詰め込んだだけになっていませんか?もちろん名刺やショップカードというのは副次的なものであり、その人となり・お店の…

MEETS — THE LONDON DESIGN FESTIVAL 2014

どーも@PNRAです! 先週から開催していた、『THE LONDON DESIGN FESTIVAL 2014(以下、LDF)』が明日で閉幕しちゃいます。 2003年の初開催以来、世界のデザインイベントの中でもとりわけ重要度が高いとされるLDF。今年2014年度の開催も注目度の高い内容とな…

はてブを無理矢理カスタマイズしてオリジナルテーマっぽくするwww

どーも@PNRAです! はてなブログといえば、アメーバブログ(ameblo)と並ぶ国内最大のブログサービスです。使い勝手のいい編集機能に豊富なテンプレートといじくってみて、「ああ、本当によくできてる」と関心しました。ただ、少しだけ不満があるとすれば、HT…

ブラウザのウィンドウ高さぴったり100%のHeightを取得する超絶簡単な方法

jQuery基礎講座[第3回] どーも@PNRAです!忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 今回はウェブデザインの初歩でよく手間取るウィンドウサイズいっぱいにコンテンツを表示するための高さを取得する方法です。「コンテン…

ナビゲーションから考えるUI設計「ハンバーガーボタンはユーザビリティを著しく下げる?!」

どーも@PNRAです!先日更新した『jQuery基礎講座:ハンバーガーナビゲーションボタンを作ろう!』に関するトピックです。 「ハンバーガーボタン」、またの名を「ナビゲーションドロワー」と呼ばれるナビゲーションボタン。非常にシンプル且つコンテンツ表示…

Facebook like boxを一瞬でRWD(レスポンシブウェブデザイン)に対応させる方法!

どーも@PNRAです! 今更ですがFacebook like boxを設置しました。設置にあたって、微妙に手間がかかったため、忘備録とTipsを兼ねてFacebook like boxをRWD(レスポンシブウェブデザイン)に対応させる方法を簡単に説明したいと思います。 固定幅であるFacebo…

厳選!youtube動画の埋め込み小技集

どーも@PNRAです! 今日もストレッチパワーを溜めながら張り切って便利なTipsを紹介しようと思います。今日は、youtube動画をホームページにはめ込む際の便利なTipsをご紹介します。動画公開するにはおそらく一番簡単な手段がyoutubeだと思うので、Youtuber…

音楽系アーティスト必見!専門知識不要でお洒落なアーティストページが作れる『TONEDEN』でプロモサイトを爆速OPEN!

どーも@PNRAです! 制作会社が紹介するのもあれなんですが、今日はなるたけ費用をかけずに自分のサイトが欲しい!というアーティストの方への情報です。 『SOUNDCLOUD』を使った爆速アーティストページを作成できるサイト『TONEDEN』をご紹介します。 まず…

jQuery基礎講座:ハンバーガーナビゲーションボタンを作ろう!

jQuery基礎講座[第2回] どーも@PNRAです! 忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。 前回ご紹介した『jQuery基礎講座:任意のid属性を使ったクリックアクション』を使って、今日は最近やけによく見るハンバーガーナビゲー…