制作実績のご紹介・古書ダンデライオン

こんにちは。デザイナーのKです。
今回は弊社が担当した案件のご紹介をしたいと思います。

京都で古本屋さんを運営されている「古書ダンデライオン」の、WEBサイトとオンラインショップの制作を担当しました。
お知らせ、イベント情報、おすすめ古書など、古書ダンデライオンさんが扱っている古書に関する情報が集約されたWEBサイトとなっています。

works_dandelion_01.png

■ WEBサイト
https://oldbook-dandelion.com/

■ オンラインショップ
http://shop.oldbook-dandelion.com/

まず、デザインについて簡単ですがご説明します。

今回のWEBサイトのコンセプトは「古書ダンデライオンさんの思いを思う存分発信できる、古書の魅力が伝わるサイト」に設定しました。

このコンセプトを踏まえて、古書というコンテンツを最大限に活かすことができるように、「和モダン」をテーマにデザインを考えました。
ベースカラーに白色を、アクセントカラーにブラウンを設定しました。
フォントは游明朝体使用して(一部ブラウザでは游明朝体は表示できません)優しい印象に仕上がるようにしました。

どの世代でも親しみやすいようなサイトデザインを心がけてデザイン作業を進めていきました。
特に今回、若い世代にも閲覧してもらうということを想定して、サイト全体をレスポンシブデザインで作成し、スマートフォンなどのデバイスでもPCと同じ情報が閲覧できる構成にしています。ぜひスマートフォンやタブレットなどでも閲覧してみてください^^

次にサイト構成についてご紹介します。

サイトコンセプトを意識しながら、古書ダンデライオンさんが日々、古書に対して考えていることを「イベント情報」や「おすすめ古書」などのコンテンツで世の中に発信していけるような「場所」になるよう、サイトの構成を考えていきました。
関西を中心に、さまざまな場所で精力的に古書のイベントに出店しておられるということで、トップページに「イベント情報」の記事画像が大きく表示され、ひと目でどんなイベントがあるのかがわかる導線にしています。
スマートフォンで見ると、スワイプでもスライド操作ができるようになっています^^

おすすめ古書」というコンテンツでは、古書ダンデライオンさんがおすすめするイチオシの古書を紹介しています。
古書ダンデライオンさんの、古書に対するおすすめポイントや思いを発信してもらえるように、細かく投稿内容を設定できるような仕組みにしています。
「おすすめ古書」で紹介されている古書は、併設のオンラインショップのページとリンクで紐付いており、気になった本はすぐに購入することができるように画面設計をしました。

ぜひ気になった本を見つけた場合は購入してみてはいかがでしょうか?
古書の魅力を、手にとって実際に味わっていただきたいです^^

普段古書に接することがない方も、このWEBサイトを通して古書の魅力に接していただければいいなと思っています。

また、古書ダンデライオンさんはさまざまな古本イベントに出店しておられるので、定期的にイベント情報もチェックしてみて、気になったイベントなどにはぜひ足を運んでみてはいかがでしょうか^^

– – – – – – – – – –
スプラウト株式会社は、大規模なウェブサービスのシステム開発に携わってきたノウハウを活かし、ウェブ上の様々なコミュニケーションのしくみをご提供・ご提案しています。
お気軽にお問い合わせください!

\\一緒に成長できる仲間も募集中です!!//
あなたのしたいことを、私たちと。
あなたの実現してみたいアイデアや技術を私たちに教えてください。
コミュニケーションのあたらしいカタチを私たちと一緒に考えませんか?
募集要項はこちらから。


ワークショップに行ってきた

IMG_5979.jpg
男梅グミが仕事のおともです。(シブイ)
こんにちわ。リエです。

先日ワークショップに行ってきました。
レトロ印刷さんの手作業の遊び場KO-HANへ伺いシルクスクリーンを体験してきました。
ーーーーーーーーーーーーーーーーーーーーーーー
シルクスクリーンとは?
孔版印刷の一種。
メッシュ状の版に孔(あな)を作り、孔の部分にだけインクを落として印刷するとてもシンプルな印刷方法。
ーーーーーーーーーーーーーーーーーーーーーーー
引用元:レトロ印刷JAMのシルクスクリーン

事前にデザインは入稿し、Tシャツやトートバックなどに各自自由に印刷をしました。
IMG_6264.jpg

コツが必要な箇所もありましたが、みんなうまく作ることができました!
IMG_6265 (1)

どんな色にするのか印刷場所はどこにしようかなど考えるのも楽しく、できた作品は愛着が沸き早く使用したいと思いました。(さっそく家でTシャツ着てみましたよ)

また、他社様の仕事場を見学させていただく機会は滅多にないので貴重な体験となりました。
作ったTシャツは社内行事で使用したいと思います^^

ぜひ遊びに行ってみてくださいヽ(´∀`)ノ
レトロ印刷JAM http://jam-p.com/


キーボードとともに、UIViewをずらす方法

Apple-Swift1.jpg

SwiftでiOSアプリを開発していますが、キーボードが表示される時のレイアウトで困っている方は少なくないと思います。
キーボードが表示されると、ページの下部が見えなくなったりなどの問題が発生し、エンドユーザに迷惑を掛けないように、キーボードの表示・非表示に反応するアプリを作れたらいいなと思います。

ところで、本日は、iOSのUITextFieldなどのキーボード表示とともに、UIViewをずらす方法を紹介したいと思います!
まずは、とても簡単なSingleViewアプリを用意させていただきました。


 
はるかにシンプルなアプリですが、ページの真ん中あたりに、グレー色なUITextField (文字入力欄)があり、押すとキーボードが開きます。
ページの下にオレンジ色なUIView(長方形)もあり、それをタップすると、キーボードが閉じます。
 
swiftKeyboard1.png
 
けれども、問題!
キーボードが開くと、下のオレンジ色のUIViewが見えなくなり、キーボードを閉じることができません。
 
swiftKeyboard2.png
 
それを修正するには、NSNotificationは使えます!
NSNotificationとは、引き金のようなものとイメージしたらいいと思いますです。
 
キーボードのフレームが変わった時に、オレンジ色のUIViewの位置をずらしたいと思うので、今回の例で引きたい引き金は「UIKeyboardWillChangeFrameNotification」となります。
 
では、この「UIKeyboardWillChangeFrameNotification」が引かれたら、「UIViewを適切にずらす」というコードを書きましょう!
他にも、様々なやり方はあると思いますが、解りやすい例として、以下の方法を紹介したいと思います。
 
1. まず、UIKeyboardWillChangeFrameNotificationが引かれたら、keyboardWillChangeファンクションを呼ぶ
NSNotificationCenter.defaultCenter().addObserver(self, selector: “keyboardWillChange:”, name: UIKeyboardWillChangeFrameNotification, object: nil)
 
2. このファンクションで、キーボードフレームの上部(minY)を取る
var keyboardTop = self.view.frame.height – (notification.userInfo?[UIKeyboardFrameEndUserInfoKey] as? NSValue)!.CGRectValue().minY
 
3. その新しい高さをどこかに保存する(今回は別クラスのstatic varに保存する)
KeyboardOverlay.newTop = keyboardTop
 
4. UIViewの位置をキーボードの新しい位置と以前の位置の差異の分で引き足しする。
footer.frame.origin.y = footer.frame.origin.y + (KeyboardOverlay.currentTop – KeyboardOverlay.newTop)
 
5. キーボードの現在の位置を保存する。
KeyboardOverlay.currentTop = keyboardTop
 
合わせたら、コードは以下のようになります。
 

試しましょう〜

 

動いています!
これからも、Swiftの開発、頑張ります!


Swift2でUISearchBarの背景透過

UNIQLOのヒートテックタイツを履いたら怖いものがなくなりました。
マエダです。

Apple-Swift1.jpg

Swift2でiOSアプリを開発してますがUISearchBarの背景透過について紹介します。
# あまり情報なくバッドノウハウだったらすみません。。

Swift1系でも同じことをしたい方は多数いらっしゃったようです。
参考
http://ja.stackoverflow.com/questions/7315/uisearchbar%E3%81%AE%E8%83%8C%E6%99%AF%E3%81%AEview%E3%82%92%E9%80%8F%E6%98%8E%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84

Swift2になるとSubViewアクセスできない風じゃないですか。。。
そこで参考サイトにインスパイアされて以下のようにすると実現できました。

setBackgroundImageで空のUIImageを設定してあげてます。

そもそもなんでUISearchBarの背景色指定させてくれないんだろう。。教えてエロいヒト。


オフィスが寒い

bsD785_nunowokaburuorau-tan.jpg
末端冷え性です。
こんにちわ。リエです。

毎日寒い日が続いていますね。
体調を崩す社員が増えていますが、幸いまだインフルエンザになった人はいません。
パンデミックハコワイ

やはり寒いと暖房をつけていても適温になるまでには時間がかかります。
この前、オフィスが寒いという話がでました。

とにかく足元が寒いのです。。
暖かい空気は上へ昇り、冷たい空気は下へたまるので仕方ないといえば仕方ないですが、どうにかできないのかと考える。。

◆提案1
正座で仕事する(えー!)

◆提案2
デスクの上で仕事する(えー!!)

◆提案3
我慢(えー!!!)

どれもびみょう・・・
ということでGoogle先生に聞いてみました。
その中に足元に段ボールを置いて中に足を入れてしまうという記事がありました。
段ボールは空気の層を作りだせるので、寒さを遮断してくれ中が暖かくなるそうです。
段ボールって優秀ですね。

私はひざ掛けをしているので実践はしませんが、誰か実践してくれないかとひそかに期待しております。