< pocket

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

Flexboxでスマートニュース(SmartNews)風のレイアウトを実装する方法

かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース(SmartNews)風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。

というわけで、今回はそのとき感じた「知ってよかった!」の気持ちを振り返りながら実装方法をメモしておこうと思います。

続きを読む
トップに戻る

クリックひとつでサイト公開!「Wix」を使ってブログサイトを作った時の流れ

クリックひとつでサイト公開!「Wix」を使ってブログサイトを作った時の流れ

今まで「ホームページ作成ツール」の存在を知ってはいても触れたことがありませんでしたが、先日「Wix(ウィックス)」を使ってみたところ、普段の倍以上のスピードでサイト公開までできてしまいました。

今回は、実際に Wixを使ってWebサイトを制作した流れや使用感などをWebデザイナーの目線から紹介します。

続きを読む
トップに戻る

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

さくらのサーバーでWordPressをSSL(https://)対応した時の手順10

先日、重い腰を上げてついにサイトをSSL(https:// )に対応しました。やってみれば一つ一つの作業は難しくないのですが手順がなかなか複雑だったので、今回は備忘録として一連の流れや注意点を書き残しておこうと思います。

※ちなみに、今回はさくらインターネットのサーバー(スタンダードプラン)で「ラピッドSSL」を設定した時の流れです。他のサーバーではこの手順は当てはまりません。

続きを読む
トップに戻る

媒体資料(メディアガイド)を制作した時の手順【デザイン編】

媒体資料(メディアガイド)を制作した時の手順【デザイン編】

前回に引き続き、媒体資料(メディアガイド)を制作した時のプロセスをお伝えします!今回は、制作時に意識したフォントや色のこと、資料デザインに役立つ素材サイトなどを紹介する「デザイン編」です。

続きを読む
トップに戻る

媒体資料(メディアガイド)を制作した時の手順【構成編】

媒体資料(メディアガイド)を制作した時の手順【構成編】

少し前に媒体資料を作る機会がありました。構成からデザインまで全般的に任せてもらったので、その際に学んだことやその手順を備忘録として書き残しておこうと思います。

今回は、内容の整理やデザイナーと営業の役割分担など、制作に入る前段階の「構成編」を紹介。

続きを読む
トップに戻る

資料作りの参考に!伝わるデザインの媒体資料(メディアガイド)11選

資料作りの参考に!伝わるデザインの媒体資料(メディアガイド)11選

少し前に自社メディアの媒体資料を作る機会がありました。デザインだけでなく、ページ構成や文章作成など幅広く任せてもらえることになったので、とにかく最初に色々なメディアの媒体資料を見て、見せ方を研究することからスタートしました。

今回は、デザインが素敵なだけでなく内容も読み手に伝わりやすい媒体資料を厳選して紹介します!

【2017年5月20日 追記】
ぱくたそ(PAKUTASO)」の媒体資料を追加しました!

続きを読む
トップに戻る

美しいだけじゃないミュシャ。巨大絵画「スラヴ叙事詩」やミュシャ展の見どころを紹介

美しいだけじゃないミュシャ。巨大絵画「スラヴ叙事詩」やミュシャ展の見どころを紹介

「今、国立新美術館がアツい!」…というわけで、またまた展示会に行ってきました。今回は「ミュシャ展」です!なんと、先日レポート記事を書いた「草間彌生 わが永遠の魂」の開催と重なっているですよ。

今回も、展示会の見どころやレポートはもちろん、画家でありデザイナーでもあったミュシャの魅力もタップリとご紹介します!

続きを読む
トップに戻る

水玉と生きる強さ。「草間彌生 わが永遠の魂」で圧倒的な世界観に酔いしれてきた

水玉と生きる強さ。「草間彌生 わが永遠の魂」で圧倒的な世界観に酔いしれてきた

国立新美術館で開催中の展示会「草間彌生 わが永遠の魂」に行ってきました!展示会のレポートをお伝えすると共に、前衛芸術家「草間彌生」の作品や魅力、水玉モチーフに隠された意味についても詳しくご紹介します。

続きを読む
トップに戻る

耳がとれるゴッホのフィギュアから凄すぎるメイキング動画まで!ゴッホ関連ニュース2017

耳がとれるゴッホのフィギュアから凄すぎるメイキング動画まで!ゴッホ関連ニュース2017

ゴッホの誕生日(3月30日)に毎年書いているシリーズ記事。ついに6回めです!今年もゴッホとコラボした世界中のユニークな作品やニュースを紹介していきますよ!

続きを読む
トップに戻る

Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!

画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!

続きを読む
トップに戻る