読者です 読者をやめる 読者になる 読者になる

P N R A

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

webdesign

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プログラミングをマスターしてリッチな表現をマスターしてドヤ顔するための不定期連載を始めたいと思います。時間を見つけて更新していくので、適宜チェックして…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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