ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介！ 2015 9/25 もくじ ブログの目的など デザイン ラーメンぽい配色 角丸を使って女性らしく 「ゆるっと」感を出すために手書き風に 画像はなるべく使用せず、テキストベースに WordPress サイドバーやフッターは全部ウィジェット 管理画面のカスタマイズ 広告を管理するためのプラグイン「AdSense Manager」 はじめに ラーメン評論家「本谷亜紀」さんとは 本谷亜紀さんは「ラーメン女子大生」として、テレビ朝日「お願い！ランキング」など数多くのメディアに出演し、近年は「女性ラーメン評論家」として活躍されている方です。とても可愛らしくて素敵な女性です。 「本谷亜紀のゆるっとラーメンブログ」とは 私がブログ作成をお手伝いすることになったのは、「男子ハック」の純平（@JUNP_N）さんか

もくじ 「ブログらしいデザイン」を知る デザイン前に手描きでワイヤーフレームを作る 配色はツールにお任せ【Kuler】 デザインにぴったりなフォントを選ぶ【Nexus Font】 おまけ：どこかひとつに「おっ」と思わせるしかけを 「ブログらしいデザイン」を知る 以前に「ポータルサイトのデザインをする時に意識したこと5つ」という記事を書きましたが、「ポータルサイトらしいデザイン」や「ブログらしいデザイン」というように、サイトによって「向いているデザイン」も変わってきます。 ブログの第一の目的は「記事を読んでもらう」こと。なので、デザインにとりかかる前にまず「記事を読んでもらえるようなデザイン」とはどういうものかを調べました。また、たくさんのブログのレイアウトを観察しました。 こちらの記事が参考になりました！ [非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステ

1.開封の儀 ジョジョスマホの箱はこんな感じ。承太郎の絵がかっこいい…！ 出ました！ジョジョスマホ！噂には聞いていましたが、本当にデカいです！ iPhoneと比べてみました。大きさの違いは一目瞭然ですね。 2.外観はキュートなジョリーン 外観にはジョリーンの絵が！かわいい〜！ 荒木飛呂彦先生のサインもあります。 ちなみに説明書もジョリーン。 3.岸部露伴のスタイラスペン また、箱の奥には岸部露伴のスタイラスペンがあります！ 少々わかりづらいですが、「岸部露伴」という刻印が！か、かっこいい…！ 4.カスタマイズ可能なテーマ&アイコン 電源を入れてみるとブチャラティのジッパーが！ 「スライドして開ける」という動作とマッチしていていいですね！ 初期設定は箱と同じ承太郎のテーマ。 ジョジョスマホは全部で計6つのテーマが搭載されており、テーマを変えると壁紙やアイコンが丸ごと変更できます！ また、イギ

もくじ ローカルの環境構築 テーマ作成 全体的な行程 部分的な機能の実装 使用したプラグイン サムネイルサイズ一括変更 – Regenerate Thumbnails テーマの表示確認 – WordPress Theme Test Drive リリース前 – Maintenance Mode やってしまったミス・・・ GoogleAnalyticsのコードを埋め込み忘れてしまった functions.phpのタグを閉じてしまった ローカルの環境構築 死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編） | OZPAの表4 新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにBitNamiを導入してみました。 … 個人的にはXAMPPよりはるかに簡単でした！ 以前にXAMPPでローカルの環境構築しようとして全然

今さら知りました…！便利すぎる「コンテンツに応じる」機能 皆さま、Photoshopの「コンテンツに応じる」機能をご存知でしょうか？巷では略して「コンじる」機能とも言われているようですw（以下、そう呼びます） PhotoshopはCS4以降、「コンテンツに応じて?」という言葉を使った自動処理機能を強化してきたようです。 では、その「コンじる」機能とは何でしょう。講師として登壇して下さった結城 しおりさんと鷹野さんが、「コンじる」機能を教えてくださいました！ 人肌は守ります！「コンテンツに応じて拡大縮小」 こちらは講師の結城 しおりさんに教えていただきました。 みなさん、バナーなどを作る時、 「あー！素材の幅がちょっと足りない」ということはありませんか？ こういう時、足りない部分を補完してあげてもいいいのですが、 時間がないのー！という時にはこれです！ イヤイヤイヤイヤ！！と思いますよね？で

「漫画風デザイン制作に役立つサイト14」の続編的なものです。 前回はありがたい素材サイト様のご紹介が中心でした。でも、イチから数ある素材を組み合わせて画像加工も全部自分で…って、実はなかなか難しかったりします。 というわけで、今回は手軽に漫画風デザインに挑戦できるサービスやアプリをご紹介！ああ、こういう風にすれば「漫画っぽく」なるのか！という参考になると思います。 漫画風デザインを投稿できるサービス マンガジェット！ 前回もご紹介した「漫画素材辞典β」さんが最近リリースした新たなサービスです。 素材を組み合わせて1コマ漫画を作り、それをTwitterに投稿できるというもの。 私もやってみました。 キャラクターはもちろん素子ちゃん。表情も豊富に用意されています。 キャラ・背景・吹き出しを選んで、文字を入力して…と、とても簡単です。 完成がこちら。 ただ、この時私は電車乗り間違えていたわけもな

宴のはじまり 行ったお店はこちら。美味しいイタリアンで、渋谷東急プラザ店の最上階なので、特に夜景が絶品との評判とか！ イル グァッテロ 渋谷東急プラザ店 [イタリア料理] 東急東横線渋谷駅?徒歩1分 〒150-0043 東京都渋谷区道玄坂1-2-2 渋谷東急プラザ9F（地図） ぐるなびで イル グァッテロ 渋谷東急プラザ店 の詳細情報を見る ※2012年2月14日現在の情報です @Stocker_jpさんにセレクトしていただきました！センス、ハンパないっす！！ 夜景どーん！ イタリアといえば@Stocker_jpさん！ 不慣れなイタリアの料理が並んだメニューに一同はフリーズ…。 しかし、@Stocker_jpさんは慣れた様子で全員をリードしてくれました！ それもそのはず、@Stocker_jpさんはご自身で「イタリア旅行記：Caffè Laguna」というブログや「Free.Stocker

漫画風デザインのサイト 漫画風デザインを制作する際に参考になるサイトをご紹介します。 面白法人カヤック みなさんご存知のカヤックさんのサイトです。マウスホバー時に大きな集中線と共に「パンパカパーン！！」とポップな効果音が飛び出す楽しいしかけが施されています。 那覇 居酒屋いさやん こちらのサイトも大きな効果音が集中線と共に使われていてインパクト大です。黄色と黒の組み合わせも手伝ってより効果が強まっている感じがします。 Manga iPhone Application | Manga from Japan こちらはiPhoneの漫画アプリのサイトです。 漫画の一場面のイラストを背景の多様な効果音が盛り上げています。 このアプリほしい！と思いましたが、米国用のiTunesアカウントが必要なようです。 アンドロイダー こちらはAndroidアプリの紹介サイトです。元気な配色はもちろんですが、なん

毎年12月15・16日、1月15・16日の4日間開催される伝統あるフリーマーケットです。430年以上も前から続いています。最初は古着を持ち寄ったことから「ボロ市」という名前がついたようです。 しかし！今は雑貨やゲーム、食料品など多彩な品物が売買されています。今年は復興支援物産展も開催されていました。 ボロ市の様子 会場の様子はまさに「押し合いへしあい」という言葉がぴったり！ずーっと満員電車のような状況です！混みが激しい時は10cmずつくらいしか進めません。何キロも歩いたような錯覚に襲われるのですが、恐らく当日見て歩いた距離はわずか5?600メートルだったと思います。物色の時間も含めて2時間くらいかけてたった数百メートルの間を見て回りました。 「たった2時間しかいなかったの！？」とは言わないでください…ね…(>_<)「2時間」でしたが、本当にものすごく疲れるんです！万全な状態で臨みましょう！

1．サンプルをもらって仕上がりイメージをつかむ Webと違って印刷物の面白いところは質感や香り、厚みなどがあるところです。それらは、サイトで画像を見ただけじゃわかりません。どんな名刺を作りたいのか、よりリアルにイメージするにはやはりサンプル（実物）を見せてもらうのが一番です。 逆に、それをしないと「思ってたのと色味が違う…」「もっとツルツルがよかったのにザラザラな用紙を選択しちゃった…」など後で後悔することになりかねません。 実際、私が最終的に作った名刺は訳あってサンプル請求せずに注文しました。プラスチックに「ツヤ消し加工」というものを施してみたのですが、その結果、初めて手にした時に「あれ、もっと色が鮮やかに出るかと思ってた…」と正直戸惑ってしまったのです。ツヤ消しにしたことによって発色がかなり抑えられてしまったのですね。 その後しげしげと眺めているうちに気に入ってきて、今は「これはこれで

一年を振り返って 1月 自分のふがいなさにモヤモヤ Webデザイナー歴がそろそろ丸1年になろうとしていたところ。 一応「Webデザイナー」という肩書きでお仕事させてもらっているものの、スキルが低いためまだあまりデザインの仕事がなく、「本当に自分は『デザイナー』として会社の役に立てているのだろうか」などと焦ったり、ちょっとモヤモヤしていた時期。 社内にデザイナーが自分しかいないので、余計に「早く成長してもっと色々できるようになりたい」と焦る。 2月 会社で初の特設サイト制作依頼がくる。俄然はりきる。 3月 初仕事が無事終了と同時に大地震 直前のデザイン変更等の苦難を乗り越え無事リリース！と思いきや、リリース日に忘れもしない大地震が・・・。 しかもこの月は私の誕生月でもあったため、色々と忘れられない月に。 とはいえ、初めてWebの仕事をデザインからコーディングまで初めてできたので、少し自信につ

2018年4月25日　追記 画像まとめのリンクが切れていたので、代わりに竜やドラゴン、タツノオトシゴのフリー素材を追加してみました。 「辰年」の年賀状に使われている主なモチーフ 年賀状デザインをしていて、ひとえに「辰年」といっても様々なモチーフがあるのだな、と感じました。代表的なモチーフは下記の３つだと思います。 一番右のモチーフはタツノオトシゴですね。「竜の落とし子」って、いい名前ですよね・・・！この子については後ほど紹介するとして・・・ 下のふたつのモチーフの違い、わかりますか？ 「え、どっちも竜でしょ？」と思った方がいましたら、実は違うんです！ 次でその違いについて詳しく触れていきたいと思います。 先ほどの二つの画像。ふたつとも「辰年」に多く使われるモチーフです。 両者の違い・・・それは・・・ 蛇のような下の画像。 こちらが一般的に「竜」と呼ばれるものです。 そして翼があり、後ろ足の

年賀状作成は、普段あまりできない和風のデザインができる絶好の機会なので、個人的にはとても楽しみなイベントです。 ・・・が、ウキウキでデザインが終わりいざ注文に出そうとした時、重大なことに気づきました。 年賀状って名刺やポストカードと違って、ハガキいっぱいに印刷（フチなし印刷）してくれるところが少ないんですね！ 一応「フチなし印刷」対応の業者さんはあるのですが、少しお値段がはってしまいます・・・当然会社からの許可はおりるはずもなく。 フチがあっても悪くはないんですが、自分的にはブツッと途中で途切れてしまっているようで、ちょっとかっこ悪く思えてしまいます。 「フチなし印刷」想定でデザインしてしまったため、どうしようかと途方にくれていた時、「じゃあハガキの上に絵が乗っかってるみたいにすれば？絵の端を和紙っぽくギザギザにして・・・」と会社の方から助言をいただきました。 そうすれば「絵の端がフチにな