住民や元兵士の音声証言やアメリカ軍が撮影した映像をもとに軍民合わせて20万人が犠牲になった沖縄戦を時系列に沿って伝えます

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。 最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。 他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。 ユニバーサル スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。 ピュアHTML HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。 互換性 React、VueJS、Angu

Photoshop / 5分で作る球の描き方 こんにちは。 札幌を拠点とし活動中のレタッチャーの大谷キミトです。 さぁ落書きPhotoshopの時間です。 本日は私が２０年くらい前にしていた球を描く練習 立体を出したり、影をつけたり、合成をする時にすごく役に立つ 使ってるツールも機能も基本的なもの ・長方形選択ツール ・楕円選択ツール ・塗りつぶし ・ぼかしガウス ・ぼかし移動 ・ブラシツール こんな感じで光と影を意識しながら作っていく。 合成する時に影付けや光の入れ方なども同じようなテクニックを使用します。

資料や配布物のデザインは悩みどころですが、「早く帰りたい人は利用してさくっと仕事を終えて帰宅しましょう」ということで、「フキダシデザイン」の作者であるTopeconHeroesのダーヤマさんが無料で商用利用も可能なピクトグラムを公開しています。「ピクトグラムはほとんどの場合、公共交通機関や、バリアフリーなどの標識に使われるため、雰囲気が真面目なものが多く、やや面白みに欠けるので、くだらないポーズなど多めにバリエーションを増やしていく事にしました」とのことで、ピンポイントすぎるピクトグラムの内容は、見ているだけでも楽しめます。 human pictogram 2.0 (無料人物 ピクトグラム素材 2.0) http://pictogram2.com/ トップページにはカテゴリ分けされていないピクトグラムがずらっと表示されており、ページ下部のボタンから「どんなピクトグラムがあるのか？」というこ

普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO

Windowsからでも、macOSからでも、手書きのオリジナルのフォントが簡単に作成できる無料オンラインツールを紹介します。フォントはTrueTypeもOpenTypeも作成できます。 日本語はじめ、英語、ドイツ語、フランス語、スペイン語などのフォントを作成することができ、リガチャ（合字）にも対応しています。 Calligraphr さっそく、Calligraphrで手書きの日本語フォントを作成してみました。 作成するには、メールアドレスの登録（無料）が必要です。 ※無料版でもフォントは無制限に作成できますが、同時に作成できるのは一つまでで、75文字までとなっています。 全体的な流れは、下記のようになります。 作成するフォントを決める（日本語・英語・ひらがなやカタカナや漢字のみも可）。 手書き用のテンプレートをダウンロード。 テンプレートに文字を手書きし、アップロード。 アップロードしたテ

ご利用にあたってのお願い 当サイトでは個人情報保護と利便性の観点からCookieを使用しています。 このページが表示される場合は、Cookieを使用できるようにブラウザの設定を変更していただく必要があります。 なお、Cookieは個人情報収集等の目的では使用しておりません。 リクナビ派遣は、派遣会社と人材派遣のお仕事情報を掲載するリクルートの派遣サイトです 派遣のお仕事情報は、毎日三回更新。人材派遣会社から寄せられる派遣の求人情報を掲載しています。派遣社員を希望する方は、勤務地や駅・沿線、職種、時給に加え、紹介予定派遣や第二新卒歓迎など、希望の条件で派遣のお仕事情報を探すことができます。また、派遣に関するQ&Aや人材派遣に関する各種ランキングなど、既に派遣社員として働く方だけでなく、派遣社員として初めて働く方向けの情報も掲載しています。 リクナビ派遣のトップページへ >>

CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ

Flat UI Colorsがバージョンアップし、世界各国の有名デザイナーと協力して作成されたフラットなUIデザインに合うカラーパレットを紹介します。 Flat UI Colors 2 カラーパレットはFlat UI Color本家のを含めて、全部で14種類、トータルで280色のカラーがまとめられています。カラーはコピペで簡単に取得することができ、すぐにデザインやプロジェクト、プレゼンに利用できます。 まずは、本家のカラーパレットから。

同じようなデザインの手直しに人生の貴重な時間を費やしたいと思う人はいません。過去に別のアプリなどで解決されている問題があるのなら、その問題の解決策がテンプレートとして既に存在するはずです。それこそが、誰にでも使えるデザインパターンです。 ここでは、Web上でデザインパターンを見つけるのに最適なサイトをリストアップしました。執筆時現在、これらのリソースはすべて無料ですが、一部はプレミアム版などを支払うように求められる場合があります。なお、この記事は、これらのサイトのアフィリエイトではないことを最初に断っておきます。 UI Patterns UI Patternsでは、好みのパターンを簡単に検索でき、使えると思ったパターンをグループ化することができます。また、自分のデザインでのパターン活用に役立つ、UIデザインパターンに関する多くの興味深い記事があります。 WELIE Interaction

ビジネス系のサイトをはじめ、ランディングページ、ポートフォリオ、もちろん個人ブログにもぴったりなイラストのSVG素材が無料でダウンロードできるサイトを紹介します。 シンプルでセンスのあるイラストが揃っており、しかもクレジット表記不要の太っ腹ライセンスなので、使い勝手がよいと思います。 unDraw unDrawの特徴 イラストのSVG素材 素材のダウンロード unDrawの特徴 unDrawではランディングページ、スマホアプリ、プロダクトなどで利用できるイラストのSVG素材が無料でダウンロードできます。 イラストのフォーマットは、SVGと透過PNG イラストのテーマカラーは変更可能 MITライセンスで、使用時のクレジット表記は不要 テーマカラーの変更は、オンラインで簡単にできます。SVGだけでなく、PNGにも対応しています。

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

個人でも商用でも無料利用できる、日本語のフリーフォント332種類を紹介します（公開時より、3+18個増えました）。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です！ 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。

日本の伝統や文化、四季の風物詩をピクトグラムで表現したアイコン素材を紹介します。 配布中止になっていたのですが、今回当ブログで再配布することになりました。作者様に感謝です！ アイコンのフォーマットは、2種類。 .png（透過PNG） .psd（シェイプ） アイコンは日本人に馴染みのある日本の伝統や文化、四季の風物詩がシンプルにデザインされています。.psdのシェイプは、サイズやカラーを変更することもできます。 日本の風習を伝える100のアイコン アイテム100種類は、下記の通り。 お正月 お年玉 年賀状 餅つき 成人式 節分 梅 お雛様 卒業式 ランドセル 桜 鯉のぼり 菖蒲 てるてる坊主 七夕 お中元(お歳暮) ガリガリ君 金魚すくい 朝顔 線香花火 うなぎ お墓参り 稲 松茸 紅葉 お月見 七五三 ゆず こたつ マスク 宝くじ 大掃除 除夜の鐘 厄払い 結婚式 法事 運動会 上履き お

世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ

HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで

Introduction SNSの情報発信源として強い影響力を持つ人をインフルエンサー（influencer）と呼ぶ。日本でツイッター投稿が盛り上がった10月の衆院選を分析すると、選挙のインフルエンサーの意外な姿が浮かび上がった。 データ出所：NTTデータ。リツイート含む。年代はNTTデータが推定した もっとも注目されたTweetは トランプ氏の４倍衆院選期間中の「選挙」にかかわるつぶやきをリツイート数の多い順にランク付けしたところ、トップ5はすべて4万を超え、最も多いもので9万近くに上った（10月下旬）。頻繁なツイッター発信で知られるアメリカのトランプ大統領でも、11月の来日時のつぶやきでみればリツイート数は多くて2万台。ランキング上位のつぶやきはトランプ氏の倍以上の影響力があったことになる。上位に並んだのは、投票を呼びかける前向きなつぶやきだ。 RANK Tweet DATE RT 1